JSFiddle - React, Tailwind, and code Playground

by Martin Sjåstad

HTML

<div class="unit_details">
    <div class="left_box">
        <h6>LECTURE</h6>
        <div>
            <dl>
                <dt>LECTURER</dt>
                    <dd class="first">John Gerrand <a href="#">93%</a></dd>
            </dl>
        </div>

        <div>
            <dl>
                <dt>WHEN</dt>
                    <dd class="first">1-2pm Tuesday</dd>
                    <dd>3-4pm Thursday</dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt>WHERE</dt>
                    <dd class="first">STH 1, BLD 64 <a href="#">Map</a></dd>
            </dl>
        </div>
    </div>
    <div class="center_box">
        <h6>TUTORIAL</h6>
        <div>
            <dl>
                <dt>TUTOR</dt>
                    <dd>Raj Varan <a href="#">88%</a></dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt>WHEN</dt>
                    <dd>8-9am Wednesday</dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt>WHERE</dt>
                    <dd>W364, Bld 11</dd>
            </dl>
        </div>
    </div>
    <div class="right_box">
        <h6>RATING 89% <a href="#">Hide</a></h6>
        <div>
            <dl>
                <dt>EASE</dt>
                    <dd>4.3</dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt>INTERESTING</dt>
                    <dd>3.9</dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt>BENEFICIAL</dt>
                    <dd>3.0</dd>
            </dl>
        </div>
        <div>
            <dl>
                <dt>WORKLOAD</dt>
                    <dd>4.1</dd>
            </dl>
        </div>
    </div>
    <div class="clearfix"></div>
</div>

CSS

.unit_details
{
    border: 1px solid #c8c8c8;
}

    .unit_details .left_box, .unit_details .center_box, .unit_details .right_box
    {
        float: left;
        padding: 6px;
        width: 50%;
    }
    
    .unit_details .left_box, .unit_details .center_box
    {
        border-right: 1px solid #c8c8c8;
    }
    
    .unit_details .center_box, .unit_details .right_box
    {
        border-left: 1px solid #f1f1f1;
    }
    
    .unit_details h6
    {
        color: #777;
        background-color: #f5f5f5;
    }
    
    .unit_details dt
    {
        width: 80px;
        border: 1px solid red;
    }
    
    .unit_details dd
    {
        border: 1px solid blue;    
        display: inline;
    }
    
    .unit_details dd.first
    {
        float: left;
        margin: 0;
        padding: 0;        
    }