JSFiddle - React, Tailwind, and code Playground

HTML

<div id="PartialContainer">
<h2>Validate Agent for New Business</h2>
<a href="javascript:void(0)" id="FormSlide">Click here to re-enter</a>
<div id="partialRow">
<div id="partialColumn1">
    <fieldset id="Profile" style="margin-right: 40px;">
        <legend>Profile</legend>
        <div class="partial-label">
            <label for="AgentProfile_FirstName">First Name</label>
        </div>
        <div class="partial-display" id="Result_FirstName">
            AUGMENTED
        </div>
        <div class="partial-label">
            <label for="AgentProfile_LastName">Last Name</label>
        </div>
        <div class="partial-display" id="Result_LastName">
            DISTTRANS
        </div>
        <div class="partial-label">
            <label for="AgentProfile_NameSuffix">Name Suffix</label>
        </div>
        <div class="partial-display" id="Result_NameSuffix">
            
        </div>
        <div class="partial-label">
            <label for="AgentValidationCriteria_id">Agent Id</label>
        </div>
        <div class="partial-display" id="Result_AgencyId">
            02-10-0552-02
        </div>
        <span class="header">Relationships</span><ul class="relationships">
	<li>OBFUSCATED (Bank)</li><li id="Result_Relationships_0">OBFUSCATED</li>
</ul>
        <span class="header">Mailing</span><div class="address-display" id="Result_Mailing_InvalidAddress">
	Warning: Address is Invalid
</div>
        <span class="header">Location</span><div class="address-display" id="Result_Location_InvalidAddress">
	Warning: Address is Invalid
</div>
        <br>
        <span class="header">Contact Info</span>
        
            <div class="partial-label" id="Result_ContactDataType_0">
                Mobile
            </div>
            <div class="partial-display" id="Result_ContactData_0">
                208-747-3077
            </div>  
            <div class="partial-label" id="Result_ContactDataType_1">
                Email
            </div>
     ...

CSS

/*Partial View Styles*/
fieldset {
        display: inline;
        width: 300px;
        vertical-align: top;
    }

    .header {
        text-decoration: underline;
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        float: left;
        margin-top: 20px;
    }

    legend {
        font-size: 2em;
        font-weight: bold;
        color: #007dc3;
    }
    #partialRow, .partialRow {
        display: flex;
        display: -ms-flexbox;
        display: table-row;
        -ms-flex-direction: row;
        flex-direction: row;
        vertical-align: top;
    }
    #partialColumn1 {
        display: inline-block;  
    }
    #partialColumn1, .errorCode {
        display: flex;
        display: -ms-flexbox;
        display: table-cell;
        -ms-flex-direction: column;
        flex-direction: column;
        vertical-align: top;
    }
    #partialColumn2, .message {
        display: flex;
        display: -ms-flexbox;
        display: table-cell;
        -ms-flex-direction: column;
        flex-direction: column;
        vertical-align: top;
    }

    #PartialContainer {
        margin-left: 400px;
        width: 600px;
    }

    .Valid {
        color: green;
    }

    .NeedsReview {
        color: red;
    }

    .partial-label {
        display: inline-block;
        clear: both;
        float: left;
    }

    .partial-display, .validation-summary {
        margin-left: 20px;
        display: inline;
        clear: right;
        float: right;
    }

    .criteria-display, .address-display{
        float: left;
        clear:left;
    }

.errorCode {
    clear:left;
    float:left;
    margin-right: 20px;
}

.message {
    clear:right;
}

.reviewResult {
    color: red;
    font-weight: bold;
}

.validResult {
    color: green;
    font-weight: bold;
}

.stateInput {
    text-transform: uppercase;
}

.messagesHeader {
    font-size: 1.2em; 
    font-weight: 600;
}

.summary-label {
    margin-bottom: 5px;
}

ul.relationships...