Aligning CSS spans correctly

Question

I have a very simple-looking problem in my web page.

First, here are my HTML and CSS snippets:

.middle-side p span.two {
	margin: 0 0em 0 1em;
}
.middle-side p span.bath8 {
  margin: 0 56% 0 0;
}
.middle-side p span.bath7 {
  margin: 0 46% 0 0;
}
.middle-side p span.bath6 {
  margin: 0 36% 0 0;
}
.middle-side p span.bath5 {
  margin: 0 37% 0 0;
}
.middle-side p span.bath3 {
  margin: 0 24% 0 0;
}
.middle-side p span.bath2 {
  margin: 0 14% 0 0;
}
.middle-side p span.bath1 {
  margin: 0 32% 0 0;
}

<div class="col-sm-4 middle-side immediate">
   <h4>Features:</h4>

   <p><span class="bath1">Floor</span>:<span class="two"> {{listing.floor}}</span></p>

   <p><span class="bath2">Price</span>:<span class="two"> {{listing.price}}</span></p>

   <p><span class="bath3">Plot Area</span>:<span class="two"> {{listing.size}}</span></p>

   <p><span class="bath4">Number of rooms</span>:<span class="two"> {{listing.rooms}}</span></p>

   <p><span class="bath5">Elevator</span>:<span class="two"> {{listing.elevator}}</span></p>

   <p><span class="bath6">Air Conditioned</span>:<span class="two"> {{listing.airConditioning}}</span></p>

   <p><span class="bath7">Renovated</span>:<span class="two"> {{listing.renovated}}</span></p>

   <p><span class="bath8">Balcony</span>:<span class="two"> {{listing.price}}</span></p>
</div>

This yields:

And I want it to be aligned correctly, like this:

How can I achieve this?

Answer 1

You can define a width for first span child of "immediate" class like this:

.immediate p span:first-child{
  display:inline-block;
  width:35%;
}

This is the example in JSFiddle

Answer 2

The code would look something like this. Adapt it to your needing:

<div class="box1">
    <table width="100%" border="0" cellpadding="3" cellspacing="0"onMouseover="changeto(event, '#D0DFEC')" onMouseout="changeback(event, '#ffffff')"width="100%">
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Floor:</strong></td>
            <td><font color="0075DB">5th</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Price:</strong></td>
            <td><font color="0075DB">150,000€</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Plot Area:</strong></td>
            <td><font color="0075DB">Madrid, Spain</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Number of rooms:</strong></td>
            <td><font color="0075DB">7</font></td>

        </tr>
        <tr  style="border-bottom: 1px dotted silver;">
            <td><strong>Elevator:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Air Conditioned:</strong></td>
            <td><font color="0075DB">No</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Renovated:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Balcony:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>

    </table>
</div>  

I added some mouse click event to make it look fancier, also make sure that if you use bootstrap, you do meet all bootstrap requirements regarding columns.(encapsulate the div that contains the column in a row etc etc)

This is the example in JSFiddle

Edit: Though the other solution is correct, I´d always use a table for such this thing