CSS - two divs next to each other, 100% width and overflow : <p>I want to have two divs next to each other. Not too hard right?</p>

<p>Yeah...</p>

<p>I can do things like <code>display: inline-block;</code> or <code>float: left;</code>, but I also want the divs to be <code>width: 100%</code> but as soon I do that they get displayed below each other.</p>

<p>To better illustrate what I want I have drawn this:</p>

<p><a href="https://i.stack.imgur.com/jiDKs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jiDKs.png" alt="enter image description here"></a></p>

<p>As you can see <code>child div 1</code> is visible inside the parent(<code>overflow: hidden;</code>) and <code>child div 2</code> is not because they both have a width of 100%. </p>

<p>Now, my question is: How would I accomplish this?</p>

<p>I have already tried a lot of things but almost everything ends up placing the divs below each other.</p>
