JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>div test</title>
    <style>
        html {
            font: bold 20px Arial;
            color: white;
        }

        #container {
            border: 1px dotted black;
            width: 90%;
        }

        .red {
            background: red;
            float: left;
            opacity:0.5;
        }

        .blue {
            background: blue;      
            display:inline;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="red">Here is some text in the red div.</div><div class="blue">Some text in blue div. Some text in blue div. Some text in blue div. Some text in blue div. </div>
    </div>
    <br />
    <br />
    <p style="color:#000">Red + Blue = 100% of #container</p>
</body>
</html>