JSFiddle - React, Tailwind, and code Playground

by huskydawgs

HTML

<div class="wrapper-data">
    <div class="data_cell1">
        <p><strong>Contact</strong>: Link Polk, Manager<br />
        <strong>Phone</strong>: (407) 665-7177<br />
        <strong>Email</strong>: <a href="mailto:[email protected]">[email protected]</a></p>
    </div>
    <div class="data_cell2"></div>
    <div class="data_cell3">
        <p class="right"><strong>Fax</strong>: (407) 665-7183<br />
        <strong>Department</strong>: Budget<br />
        <strong>Agency</strong>: Seminole County, Florida</p>
    </div>
</div>

CSS

/* Wrapper - Data */

    .wrapper-data {
        position: relative;
        width: 100%;
        border: none;
        margin: 20px 0 0 0;
        overflow: hidden;
            border:1px solid black;
    }

        .wrapper-data p {
            font-family:Arial,Helvetica,sans-serif;
            font-size:16px;
            color:#616161;
            margin:0 0 0 49px;
            text-align:left;
            font-weight:normal;
            line-height: 24px;
    }

        .wrapper-data p.right {
            font-family:Arial,Helvetica,sans-serif;
            font-size:16px;
            color:#616161;
            margin:0 0 0 80px;
            text-align:left;
            font-weight:normal;
            line-height: 24px;
    }

    .data_row {
        height: 100%;
        min-height: 100%;
        white-space: nowrap;
        display: table;
        width: 100%;
    }

    .data_cell1 {
        width: 48%;
        white-space: normal;
        display: table-cell;
        vertical-align: middle;
    }

    .data_cell2 {
        width: 4%;
        display: table-cell;
        white-space: normal;
    }

    .data_cell3 {
        width: 48%;
        display: table-cell;
        white-space: normal;
            border:1px solid red;
}