ParentA Child Expands Parent, ParentB Child does not. Exact Same Setup - html

Question

Terrible title, I know.. it's just different than any other "Child expanding outside of parent" problem I've ever had or saw.
Anyway, I have two children with the same structure and same CSS applied to both.
HTML:
<div id='base'>
<div id='banner'>
Link 1
Link 2
Link 3 with longer width
Link 4
Link 5 dif size
Link 6
</div>
<form id='form'>
<div>
<div class='col-6-'>
<p>dd</p>
<!--<p>dsadosih doijasd oouhvodus ouhfoiusdif oiudhaoudd
oinoiuasd onhasoiduf ou oud oijod</p>-->
</div>
<div class='col-6-'>
<p>dsadosih doijasd oouhvodus ouhfoiusdif oiudhaoudd
oinoiuasd onhasoiduf ou oud oijod</p>
<br>
<p>dsadosih doijasd oouhvodus ouhfoiusdif oiudhaoudd
oinoiuasd onhasoiduf ou oud oijod</p>
</div>
</div>
</form>
</div>
CSS:
*
{
margin: 0;
padding: 0;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body
{
height: 100%;
color: #0068ac;
}
body {
text-align: center;
background: #689976;
}
.col-6-{width: 48%;}
body
{
background: gray;
}
#base
{
display: inline-block;
padding-top: 5%;
height: 90%;
/* width: 90%; */
}
#form
{
height: 98%;
background: #E6F0F7;
border-radius: 0 0 5px 5px;
}
#banner a
{
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
position: relative;
padding: 0 10px 0 60px;
color: #ffe143;
background: #32a252;
height: 2em;
}
.col-6-
{
display: inline-block;
}
#form div div
{
text-align: left;
vertical-align: top;
padding: 1%;
}
#form div p
{
word-break: break-all;
}
I've never tried to share a jsfiddle, but hopefully this works: https://jsfiddle.net/12rLb42a/
Bottom Line
As you can see there are two divs at 48% width of the parent. The second div contains two p's that wrap within the 48% space and don't breach it.
If you uncomment the p element in the first div, you will see that is not the case for that one because it does expand the parent. Why is this happening?