word-break css not aligned accordingly

Question

Is there a way that i can make the word align properly? I tried to add word-break and word-wrap property in but it didn't make any different.

<div class="transreview" style="float: right; background-color: #e0e0e0;   word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px;">

    <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">

    <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Subtotal</b></label>

     <div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
</div>

    <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">

    <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>

    <div class="review-label" style="float: right; text-align: right; height: 20px; width: 120px; padding: 5 5 5 5px">S$42.50</div>
    </div>
</div>

Answer 1

You have to put the fixed width for both the Parent container and the label. Please check http://jsfiddle.net/fanafazil/rcye5m36.

<div class="transreview" style="float: right; background-color: #e0e0e0;   word-wrap: break-word; border-radius: 5px; padding: 10 20 10 20px; width: 210px;">
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Sub Total</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Tax</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Discount</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
   <div class="transreview-item" style="float: right; clear: both; width: 100%; margin-bottom: 10px;">
      <div style="float: left;width:100px;padding-right: 5px;">
         <label class="transreview-label" style="clear: both; width: 79%; text-align: right;"><b>Total Shipping(Including Tax and VAT)</b></label>
      </div>
      <div class="review-label" style="float: right; text-align: right; height: 20px; width: 90px; padding: 5 5 5 5px; background-color:#FFFFFF;">S$42.50</div>
   </div>
</div>

Answer 2

Turn it into a table. I made a Fiddle. Just tweak the CSS and you should get the same result. But don't add CSS inline!

HTML

<table>
    <tbody>
        <tr>
            <td>
                Subtotal
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Total Shipping
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Tax
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Discount
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
        <tr>
            <td>
                Total (including tax, if applicable)
            </td>
            <td>
                <label>
                    S$42.50
                </label>
            </td>
        </tr>
    </tbody>
</table>

CSS

table{
    background-color: #E0E0E0;
    border-radius: 5px;
    padding: 4px 0;
}

td label{
    background-color: #FFF;
    border-radius: 5px;
    padding: 4px 4px 4px 20px;
}

td{
    padding: 4px;
}