JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flight">
    <div class="flight_no">
        <p>QF2290</p>
    </div>
    <div class="legs">
        <div class="leg">
            <p>Details</p>
        </div>
        <div class="leg">
            <p>Details</p>
        </div>
    </div>
    <div class="price">
        <p>$2500</p>
    </div>
</div>

CSS

body, html { height: 100%; }
.flight
{
    float: right;
    border: 1px solid green;
    height: 100%;
}

.flight .flight_no, .flight .price
{
    border: 1px solid black;
    float: left;
    width: 100px;
    height: 100%;

}

.flight .legs
{
    float:left;
}

.flight .legs .leg
{
    border: 1px solid black;
    position: relative;
    height: 100px;
    width: 300px;
    margin: 20px 0px;
}