JSFiddle - React, Tailwind, and code Playground

by thebabydino

HTML

<div id="infoDiv">
    <div id="address1Div" class="dataLine">
        <div class="freeTwoColumnFirstEntry">
            Address:
        </div>
        <div class="freeTwoColumnSecondEntry">
            <span id="detailContentPlaceholder_lblAddress1">Santhom Avenue, 3456</span>
        </div>
    </div>
    <div id="cityStateCountryDiv" class="dataLine">
        <div class="col">
            <div id="cityDiv" class="freeTwoColumnFirstEntry">
                City:
            </div>
            <div id="cityDivVal" class="freeTwoColumnSecondEntry">
                <span id="detailContentPlaceholder_lblCity">Akron</span>
            </div>
        </div>
        <div class="col">
            <div id="stateDiv" class="freeTwoColumnFirstEntry">
                State:
            </div>
            <div id="stateDivVal" class="freeTwoColumnSecondEntry">
                <span id="detailContentPlaceholder_lblState">OH</span>
            </div>
        </div>
        <div class="col">
            <div id="countryDiv" class="freeTwoColumnFirstEntry">
                Country:
            </div>
            <div id="countryDivVal" class="freeTwoColumnSecondEntry">
                <span id="detailContentPlaceholder_lblCountry">United States</span>
            </div>
        </div>
    </div>
</div>

CSS

#infoDiv
{
     width:550px;
     border:1px solid Red;
    overflow: hidden;
}
.dataLine
{    
    width:100%; 
    min-width:650px;
    height:auto;
    margin:1px 1px 1px 1px;
    padding: 0 0 0 0px;
    /*border:1px solid Cyan;*/
    overflow: hidden;
}
.freeTwoColumnFirstEntry
{    
    height:auto;
    float:left;
    margin:0 0 0 0px;
    padding:0 0 0 2px; 
    font:normal 9pt Arial;
    display:inline;
    
}
.freeTwoColumnSecondEntry
{    
    height:auto;
    float:left;
    margin:0 0 0 0px;
    padding:0 0 0 2px; 
    font:normal 9pt Arial;
    display:inline;
    
}
.col {width: 33%;}