Within my parent div with a padding of 20px, I am trying to make two span tags each occupy 50% of the parent div's width and align on the same line. Despite using box-sizing: border-box, the issue persists.
HTML
<div>
<span>foo</span>
<span>bar</span>
</div>
CSS
div {
border: 1px solid black;
box-sizing: border-box;
padding: 20px;
width: 150px;
}
div span {
box-sizing: border-box;
border: 1px solid green;
display: inline-block;
width: 50%;
}
UPDATE:
It turns out that in this scenario, using box-sizing was unnecessary and following CBroe's solution resolves the issue effectively.