JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <p style="background-color: #C3C3C3">
                DIV 1 - content should be on the left.<br />
                This content is higher then the right (DIV 2) content.
            </p>
        </div>
        <div class="col-md-8">
            <p style="background-color: #D1D1D1">
                DIV 2 - content should be on the right.
            </p>
        </div>
        <div class="col-md-8">
            <p style="background-color: #F1F1F1">
                DIV 3 - Content should be on the desktop right. And
                mobile below both DIVs.
            </p>
        </div>
    </div>
</div>

CSS

.row{
  display:flex;
  flex-direction:column;
}