JSFiddle - React, Tailwind, and code Playground

HTML

<!-- max:6em -->
<div class="left"></div>
<!-- take up the rest -->
<div class="right"></div>
<!-- As big as it can be, max: 30em; -->
<div class="body">
A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now. When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees
</div>

<div style="clear: both;" />

CSS

/* left and right should be empty, just to make the body behave as needed */

.left, .right {
    background: gray;
}

.left {
    float: left;
    max-width: 6em;
}
.right {
    float: right;
    width: auto;
}

.body {
    max-width: 30em;
    border: 1px solid green;
}