This problem is really puzzling me.
Although I can make it work by floating the elements, I am curious to know why this issue is occurring.
Here is the code snippet:
.container {
width: 1000px;
height: 400px;
background-color: purple;
position: relative;
}
.item {
height: 100px;
display: inline-block;
}
.item.left {
width: 70%;
background-color: green;
}
.item.right {
width: 30%;
background-color: orange;
}<div class="container">
<div class="item left"></div>
<div class="item right"></div>
</div>