Simple div layout

by doug65536

HTML

<div>This div has small content</div>
<div class="rowcontainer">
    <div class="colcontainer">
    <div class="rowitem" id="leftthing"><div id="insideleftthing">This is left thing</div></div>
    <div class="rowitem fullwidth">This div has a div inside it:
        <div>This is the nested div with a lot of text that wraps</div>
    </div>
    </div>
</div>
<div>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
    <p>This div has a lot of content</p>
</div>

CSS

div {
    border: solid black 1px;
    padding: 8px;
    border-radius: 8px;
}
.rowcontainer {
    display: table;
}
.colcontainer {
    display: table-row;
    width: calc(100% - 18px);
}

#leftthing {
    min-width: 75px;
}

#insideleftthing {
}

.rowitem {
    display: table-cell;
}
.fullwidth {
    position: relative;
    width: 100%;
}