JSFiddle - React, Tailwind, and code Playground

by AndreaLigios

HTML

<div id="wrapper">
    <div id="left-content">
        <p>
            Some paragraph content
        </p>
    </div>
    <div id="right-content">
        <section>
            <h1>Top (Left)</h1>
        </section>
        <section>
            <h1>Bottom (Right)</h1>
        </section>
    </div>
</div>

CSS

div {
    min-height: 50px;
    background: #E7E7E7;
    margin: 10px;
}
#wrapper {
    display: flex;
    flex-wrap: wrap;
}
#left-content {
    flex: 2;
    min-width: 200px;
}
#right-content {
    flex: 1;
    min-width: 200px;
}
section {
    border: 1px solid #333;
    margin: 10px;
}
@media (max-width: 475px) {
  #right-content {
    display: flex;
    flex-direction: row;
  }
}