html - 正确对齐CSS跨度

我的网页看起来有一个很简单的问题。
首先，这里是我的HTML和CSS片段：

.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>

这将产生：

我希望它正确对齐，如下所示：

我怎样才能做到这一点？

最佳答案

可以为“immediate”类的第一个子跨距定义宽度，如下所示：

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

This is the example in JSFiddle