I need to arrange 3 blocks as follows:
- The first block should be 200px wide and aligned with the left side.
- The second block should start right after the first block and have its right edge at exactly 50% width of its container.
- The third block should take up the remaining space.
Here is a similar setup I created in a game engine: https://i.sstatic.net/JxyDQ.gif
How can I achieve this using CSS?
I prefer not to nest the inner divs because they serve the same purpose.
I attempted the following but it's not functioning correctly :(
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
display: flex;
position: relative;
}
.wrapper > * {
height: 300px;
display block;
}
.wrapper > *:nth-child(1) {
background-color: salmon;
width: 200px;
}
.wrapper > *:nth-child(2) {
background-color: khaki;
right: 50%;
}
.wrapper > *:nth-child(3) {
background-color: violet;
width: 50%;
}<div class="wrapper">
<pre>
left: 0;
width: 200px;
</pre>
<pre>
left: 200px;
right: 50%;
</pre>
<pre>
left: 50%;
right: 0;
</pre>
</div>