JSFiddle - React, Tailwind, and code Playground

by v413hav

HTML

<div class="invoice-totals">   
    <div class="total">
        <div class="label">TOTAL</div>
        <div class="value">133.00</div>
    </div>

    <div class="paid-total">
        <div class="label">Payments</div>
        <div class="value">0.00</div>
         <div style="clear: both;"></div>
    </div>

    <div class="due-total">
        <div class="label">AMOUNT DUE</div>
        <div class="value">133.00</div>
         <div style="clear: both;"></div>
    </div>
   
</div>

CSS

.invoice-totals {
    padding: 10px;
    float: right;
}

.invoice-totals .label {
    float: left;
    width: 225px;
    text-align: right; 
}

.invoice-totals .value {
    float: left;
    text-align: right;
    width: 150px;   
}

.invoice-totals .due-total {
    border: 1px solid #ff0000;
    background-color: #CCC;
    padding: 5px;   
}