The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float
or display: inline-block
. (Just don’t leave any whitespace between the divs).
Here is a demo:
div {
background: red;
}
div + div {
background: green;
}
<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>