JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent-container">
    <section class="child-container-1">
        1
    </section>
    <section class="child-container-2">
        2
    </section>
    <section class="child-container-3">
        3
    </section>
</div>

CSS

.parent-container {
    width:                760px;
    display:              block;
    margin:               20px auto;
    background-color:     #24A0DA;
}

.child-container-1 {
    height:               200px;
    border:               solid 1px purple;
}

.child-container-2 {
    width:                60%;
    border:               solid 1px black;
    box-sizing:           border-box;
   -webkit-box-sizing:    border-box;
   padding:               30px;
   display:               inline-block;
   vertical-align:        top;
}

.child-container-3 {
    border:               solid 1px red;
    width:                40%;
    box-sizing:           border-box;
   -webkit-box-sizing:    border-box;
   padding:               30px;
   display:               inline-block;
   vertical-align:        top;
}