JSFiddle - React, Tailwind, and code Playground

by Peter Nosko

HTML

<div class="container">
    <div class="div1"><span>Search Panel</span>
        <dl>
            <dd>Group 1</dd>
            <dd>Group 2</dd>
            <dd>Group 3</dd>
            <dd>Group 4</dd>
            <dd>Group 5</dd>
        </dl>
    </div>
    <div class="div2">
        <div class="header"> <span>Search Results</span>

        </div>
        <div class="ResultsTable">
            <div class="ResultsRow OddRow">
                <div class="ResultsCell">Line 1 - Field 1</div>
                <div class="ResultsCell">Line 1 - Long Field 2</div>
                <div class="ResultsCell">Line 1 - Very Long Field 3</div>
            </div>
            <div class="ResultsRow">
                <div class="ResultsCell">Line 2 - Very Long Field 1</div>
                <div class="ResultsCell">Line 2 - Exceptionally Long Field 2 with extra text</div>
                <div class="ResultsCell">Line 2 - Field 3</div>
            </div>
            <div class="ResultsRow OddRow">
                <div class="ResultsCell">Line 3 - Field 1</div>
                <div class="ResultsCell">Line 3 - Long Field 2</div>
                <div class="ResultsCell">Line 3 - Stupendously Very Long Field 3
                    <br>with a line break</div>
            </div>
            <div class="ResultsRow">
                <div class="ResultsCell">Line 4 - Field 1</div>
                <div class="ResultsCell">Line 4 - Field 2</div>
                <div class="ResultsCell">Line 4 - Field 3</div>
            </div>
        </div>
    </div>
</div>

CSS

.container {
    overflow:auto;
    overflow-y: hidden;
    white-space: nowrap
}
.div1 {
    background-color:yellow;
    float:left;
    display:block;
    width:150px;
}
.div2 {
    display: inline-block;
    overflow:auto;
}
.header {
    float:top;
    display: inline-block;
    padding: 5px;
}
.ResultsTable {
    display:table;
    padding:5px;
}
.ResultsRow {
    display:table-row;
    padding:5px;
}
.ResultsCell {
    display:table-cell;
    padding:5px;
}
.OddRow {
    background-color:lightgrey;
}