CSS Text align with multiple Div's - css

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

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

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>