JSFiddle - React, Tailwind, and code Playground

by Eduardo GarcĂ­a Sanz

HTML

<div id="foo">
    <div></div>
    <div>Very long content that does not fit in (50% - 100px)</div>
    <div></div>
    <div></div>
</div>

CSS

#foo {
    position: relative;
    background-color: #ccc;
}

#foo:after {
    content: "";
    clear: both;
}

#foo > div {
    width: calc(50% - 100px);
    height: 100px;
    float: left;
}

#foo > div:nth-child(1) {
    width: 100px;
    background-color: #f00;
}

#foo > div:nth-child(2) {
    background-color: #0f0;
    min-width: 300px;
}

#foo > div:nth-child(3) {
    background-color: #00f;
    min-width: 300px;
}

#foo > div:nth-child(4) {
    width: 100px;
    background-color: #000;
}