JSFiddle - React, Tailwind, and code Playground

by Luke Marlow

HTML

<div class="container">
        <div class="row">
            <div class="div1">
                <!--<img src="some-image.png" />-->
            </div>
            <div class="div2">
                <div class="div2a">Lorem ipsum lorem ipsum lorem ipsum dolla Lorem ipsum lorem ipsum lorem ipsum dollar</div>
                <div class="div2b">Lorem ipsum lorem ipsum lorem ipsum dolla Lorem ipsum lorem ipsum lorem ipsum dollar</div>
                <div class="div2c">Lorem ipsum lorem ipsum lorem ipsum dolla Lorem ipsum lorem ipsum lorem ipsum dollar</div>
            </div>
        </div>
    </div>

CSS

.container {
        background: red;
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .row {
        display: table-row;
        width: 100%;
    }

    .div1, .div2 {
        display: table-cell;
        padding: 30px;
    }

    .div1 {
        background: blue;
        width: 60px;
    }

    .div2 {
        background: orange; 
    }

    .div2a, .div2b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }