JSFiddle - React, Tailwind, and code Playground

by Gerald Fullam

HTML

<div>
    <section>
        <span>
        <pre>hello worldddddddddddddddddddddddddddddddddddddddddddddddddddd</pre>
        </span>
    </section>
</div>

CSS

div {
    max-width: 400px;
    display: flex;
}
section {
    position: relative;
    display: flex;
    align-items: stretch;
    flex: 1 1 0%;
    border: 1px solid gray;
    background-color: red;
    padding: 6px;
}
span {
    position: relative;
flex: 1 1 0%;
}
pre {
    background-color: white;
    border: 1px solid gray;
    white-space: pre-wrap;
    word-wrap: break-word;
    width: 100%;
}