Having some trouble getting two divs with a width of 50% each to appear on the same row. If I adjust the width to 49%, they stack in the same row. Any ideas on what might be causing this issue in the code? I'm more interested in understanding the cause rather than just finding a solution.
CSS -
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
}
.left-c {
width: 50%;
background: #3EF00C;
display: inline-block;
}
.right-c {
width: 50%;
background: #2E4E6E;
display: inline-block;
}
HTML -
<div class="wrapper">
<div class="left-c">
<p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
</div>
<div class="right-c">
<p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
</div>
</div>
JS Fiddle - https://jsfiddle.net/no0chhty/1/