CSS Text align with multiple Div's

Question

i have a Problem i have these Markup & CSS i wanted, that the H2 and the p Tag are one the same Line.At the moment the h2 is a little bit under the vertical Line.I wouldn't use margin or padding have anyone a Solution?

Thanks for your help.

.content-left {
    float: left;
    width: 50%;
}

.content-right {
    float: right;
    width: 50%;
}



.content-left, .content-right {
    min-height: 10em;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.content-box {
    border-bottom: 1px dotted black;
    overflow: hidden;
    min-height: 5em;
}

.content-box ul {
    list-style: none;
}

.content-box ul li {
    text-indent: -1.4em;
    padding-bottom: .3em;

}

.content-box ul li {
    text-indent: -1.4em;
}

.content-box ul li:before {
    font-family: fontawesome;
    content: "\f054";
    float: left;
    width: 1.4em;
    margin-top: .2em;
    color: #0062ae;
    font-size: 1em;
}

.content-box ul {
    padding: 0;
}

.content-box p {

    font-weight: 300;


}

.content-box li {
    font-size: .9em;
    font-weight: 300;
}

.content-left h2 {
    color: #0062ae;
    text-align: right;
    word-wrap: break-word;

}
.content-right p {
    line-height: 1.5em;

}

<div id="main-content">
    <div class="wrapper">
        <div class="content-box">
            <div class="content-left">
                <h2 class="blue font-xs">...</h2>
            </div>
            <div class="content-right">



                        <p>..</p>


                        <p>...</p>


            </div>
        </div>

Answer 1

I have set the Box-sizing. Have a look i uploaded a full fiddle with all CSS Files.

http://jsfiddle.net/4pqzLk5f/

.content-left {
    float: left;
    width: 50%;
}

.content-right {
    float: right;
    width: 50%;
}



.content-left, .content-right {
    min-height: 10em;
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 2%;
    margin-bottom: 2%;
}

.content-box {
    border-bottom: 1px dotted black;
    overflow: hidden;
    min-height: 5em;
}

.content-box ul {
    list-style: none;
}

.content-box ul li {
    text-indent: -1.4em;
    padding-bottom: .3em;

}

.content-box ul li {
    text-indent: -1.4em;
}

.content-box ul li:before {
    font-family: fontawesome;
    content: "\f054";
    float: left;
    width: 1.4em;
    margin-top: .2em;
    color: #0062ae;
    font-size: 1em;
}

.content-box ul {
    padding: 0;
}

.content-box p {

    font-weight: 300;


}

.content-box li {
    font-size: .9em;
    font-weight: 300;
}

.content-left h2 {
    color: #0062ae;
    text-align: right;
    word-wrap: break-word;

}
.content-right p {
    line-height: 1.5em;

}

<div id="main-content">
    <div class="wrapper">
        <div class="content-box">
            <div class="content-left">
                <h2 class="blue font-xs">...</h2>
            </div>
            <div class="content-right">



                        <p>..</p>


                        <p>...</p>


            </div>
        </div>

Answer 2

By default, padding is added to the width of a block element, eg. 2 divs with 50% width and a 1% padding become a total width of 102% - So you would need to set them at 49.5% width and 1% padding.

Alternatively, you can use box-sizing: border-box which makes the padding become part of the width, so 2 divs at 50% width and 1% padding will remain 50% width each, hence totaling 100%.

Answer 3

Your snippet doesn't work because you are missing to set box-sizing property in your CSS:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Take a look at this jsFiddle.

Without setting box-sizing property to border-box, the left and right paddings you added caused content-left and content-right divs to exceed 50% width. See this document for more details:

border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin