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

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