JSFiddle - React, Tailwind, and code Playground
HTML
<article>
<section>
<p>Box with Contant A</p>
<p>Box with Contant B</p>
</section>
<section>
<p>Box with Contant C</p>
</section>
</article>
CSS
article {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
article > section {
display: flex;
}
article > section:first-Child {
flex-direction: row;
flex: 1;
justify-content: space-around;
}
article > section:last-Child {
flex: 3;
justify-content: center;
}
p {
margin: 1em;
padding: 1em;
white-space: nowrap;
text-align: center;
background-color: lightgreen;
}