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

.body {
    max-width: 30em;
    border: 1px solid green;
    margin-right: 1em;
}
@media screen and (max-width: 480px) {
    .body {
        margin-left: 2em;
    }
}
@media screen and (min-width: 481px) {
    .body {
        margin-left: 4em;
    }
}