JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <table><tr>
        <td class="red">Here is some text in the red div.</td>
        <td  class="blue">
        Some text in blue div. Some text in blue div. Some text in blue div. Some text in blue div.     
        </td>
 </table>
            
    <br />
    <br />
    <p style="color:#000">Red + Blue = 100% of #container</p>

CSS

html {
            font: bold 20px Arial;
            color: white;
        }

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

        .red {
            background: red;
            opacity: 0.5;
            white-space: nowrap
        }

        .blue {
            background: blue;
        opacity: 0.5;
        
        }