Aligning words with different widths

Question

I know this sounds like a silly question, but I'm having a brain fart and cannot think of an easy solution. I just keep thinking of tables, and I really don't want to go that route.

I have a list of people that have a wait time next to them. I now have to stick their 'status' next to the person. This is no issue, however I'm being ocd and the fact that the status's don't quite line up bugs me greatly.

I've included a snippit of what I'm trying to do. I have tried floating and a few other tricks, but I just can't seem to get them even.

The one thing I cannot do is change the html. I have it this way so I can insert blocks of html and I cannot refactor that code.

.waitlist {
  width: 40%;
}

.waitlist .panel-body {
  padding: 0;
  border: 2px solid light-gray;
  border-top: none;
  border-bottom-left-radius: .4em;
  border-bottom-right-radius: .4em;
}

.waitlist .panel-body h4 {
  line-height: .5em;
  text-align: left;
  padding: .4em 0;
}

.waitlist .order {
  padding-left: .5em;
}

.waitlist .EstWaitTime {
  float: right;
  padding-right: .5em;
}

<div class="waitlist">
  <div class="panel panel-default">
    <div class="panel-heading" style="color: rgb(255, 255, 255); background-color: rgb(204, 0, 0);">
      <h3 class="panel-title" style="font-size: 1.25em;">
<span>Wait time:</span>
<span class="pull-right">4 hr 0 min</span>

</h3>
    </div>
    <p class="clearfix"></p>
    <div class="panel-body clearfix">

      <!-- ko foreach: WaitList -->

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order" >1.</span>
<span class="name">tes, e</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">Next</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">2.</span>
<span class="name">fdg, 3</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">25 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">3.</span>
<span class="name">fdg, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">50 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">4.</span>
<span class="name">gdf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 5 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">5.</span>
<span class="name">dsf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 30 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">6.</span>
<span class="name">gf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 55 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">7.</span>
<span class="name">thi, d</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 20 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">8.</span>
<span class="name">fds, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 45 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">9.</span>
<span class="name">rtr, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 10 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">10.</span>
<span class="name">tss, g</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 35 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>
      <!-- /ko -->

    </div>
    <div class="disclamier panel-footer" style="font-family: sans-serif;">
      <p>Wait times are approximate. Actual wait time may vary.</p>
    </div>
  </div>
</div>

Answer 1

CSS Tables would seem to be the answer.

.panel-body {
  display: table;
  width: 400px
}
.people {
  display: table-row;
  table-layout: fixed;
}
.people span {
  display: table-cell;
  border: 1px solid lightgrey;
}
.EstWaitTime {
  text-align: right;
}

<div class="panel-body clearfix">
  <h4 class="people" style="font-family: sans-serif;">
<span class="order">6.</span>
<span class="name">gf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<span class="EstWaitTime">1 hr 55 min</span>
</h4>
  <h4 class="people" style="font-family: sans-serif;">
<!--<p  class='pull-left'>-->
<span class="order">5.</span>
<span class="name">dsf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 30 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>
</div>

Answer 2

Don't be afraid of tables for tabular data!

Yes, they are bad for laying out pages, but from your description you have inherently tabular data that needs to be displayed in a tabular layout. That's exactly what tables are for, so don't feel afraid to use them.

It's OK to Use Tables

Answer 3

You can simply give each of the preceding elements a fixed width, though I don't know what's wrong with using tables; this seems like tabular data.

Specifically:

.order {
  display: inline-block;
  width: 1.5em;
}

.name {
  display: inline-block;
  width: 3em;
}

---

.waitlist {
  width: 40%;
}
.waitlist .panel-body {
  padding: 0;
  border: 2px solid light-gray;
  border-top: none;
  border-bottom-left-radius: .4em;
  border-bottom-right-radius: .4em;
}
.waitlist .panel-body h4 {
  line-height: .5em;
  text-align: left;
  padding: .4em 0;
}
.waitlist .order {
  padding-left: .5em;
  display: inline-block;
  width: 1.5em;
}
.waitlist .EstWaitTime {
  float: right;
  padding-right: .5em;
}
.waitlist .name {
  display: inline-block;
  width: 3em;
}

<div class="waitlist">
  <div class="panel panel-default">
    <div class="panel-heading" style="color: rgb(255, 255, 255); background-color: rgb(204, 0, 0);">
      <h3 class="panel-title" style="font-size: 1.25em;">
<span>Wait time:</span>
<span class="pull-right">4 hr 0 min</span>

</h3>
    </div>
    <p class="clearfix"></p>
    <div class="panel-body clearfix">

      <!-- ko foreach: WaitList -->

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order" >1.</span>
<span class="name">tes, e</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">Next</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>

      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">2.</span>
<span class="name">fdg, 3</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">25 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">3.</span>
<span class="name">fdg, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">50 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">4.</span>
<span class="name">gdf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 5 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">5.</span>
<span class="name">dsf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 30 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">6.</span>
<span class="name">gf, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">1 hr 55 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">7.</span>
<span class="name">thi, d</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 20 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">8.</span>
<span class="name">fds, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">2 hr 45 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">9.</span>
<span class="name">rtr, f</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 10 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>


      <h4 class="people" style="font-family: sans-serif; display: block;">
<!--<p  class='pull-left'>-->
<span class="order">10.</span>
<span class="name">tss, g</span>
<span style="font-size:.6em;color:#4f851b;" class="status">Arrived</span>
<!--</p>-->
<!--<p class='pull-right'>-->
<span class="EstWaitTime">3 hr 35 min</span>
<!--</p>-->
<!--<p class='clearfix'></p>-->
</h4>
      <!-- /ko -->

    </div>
    <div class="disclamier panel-footer" style="font-family: sans-serif;">
      <p>Wait times are approximate. Actual wait time may vary.</p>
    </div>
  </div>
</div>