How to align vertically span text (floated) to bottom

Question

I current have this result:

But it should look like this:

m and s should be aligned to the bottom.

My code:

.right-timer-area {
  width: 128px;
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  font-weight: 300;
  color: #ffa000;
  float: right;
  margin: 0 50px 0 0;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
}
.right-timer-area > span.timer-centered span {
  display: inline-block;
  float: left;
  line-height: 1;
  vertical-align: bottom;
}
.right-timer-area .timer-sm {
  font-size: 16px;
}

<div class="right-timer-area">
  <span class="timer-centered">
    <span class="timer-big">15</span>
    <span class="timer-sm">m</span>
    <span>-</span>
    <span class="timer-big">45</span>
    <span class="timer-sm">s</span>
  </span>
</div>

But it didn't work. Are there any ways of solving, without changing .right-timer-area (it's centered inside other div) and without table-layout? If yes, then how?

JS Fiddle: http://jsfiddle.net/zmads0rp/1/

Answer 1

Your issue is that you have added float: left; to .right-timer-area > span.timer-centered span. This overrides display: inline-block; and means that vertical-align has no effect. To obtain the desired result make the following changes:

• Remove float: left; from .right-timer-area > span.timer-centered span
• Change .right-timer-area .timer-sm to .right-timer-area > span.timer-centered .timer-sm to make it more specific. This ensures that it overrides rules set in .right-timer-area > span.timer-centered span
• Add vertical-align: sub; to .right-timer-area > span.timer-centered .timer-sm
• Remove the whitespace between the spans in HTML either by removing the actual space, reducing the font-size of timer-centered to 0 or by using the comment trick

.right-timer-area {
  clear: right;
  width: 128px;
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  font-weight: 300;
  color: #ffa000;
  float: right;
  margin: 0 50px 0 0;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
}
.right-timer-area > span.timer-centered span {
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
}
.right-timer-area > span.timer-centered .timer-sm {
  font-size: 16px;
  vertical-align: sub;
}
.right-timer-area .fontsize {
  font-size: 0;
}
.right-timer-area span.fontsize span {
  font-size: 36px;
  vertical-align: baseline;
}

<div class="right-timer-area">
  <span class="timer-centered">
    <span class="timer-big">15</span><span class="timer-sm">m</span><span>-</span><span class="timer-big">45</span><span class="timer-sm">s</span>
  </span>
</div>

<div class="right-timer-area">
  <span class="timer-centered fontsize">
    <span class="timer-big">15</span>
    <span class="timer-sm">m</span>
    <span>-</span>
    <span class="timer-big">45</span>
    <span class="timer-sm">s</span>
  </span>
</div>

<div class="right-timer-area">
  <span class="timer-centered">
    <span class="timer-big">15</span><!--
    --><span class="timer-sm">m</span><!--
    --><span>-</span><!--
    --><span class="timer-big">45</span><!--
    --><span class="timer-sm">s</span>
  </span>
</div>

Answer 2

You can use display: table-cell and remove float: left from .right-timer-area > span.timer-centered span:

.right-timer-area {
  width: 128px;
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  font-weight: 300;
  color: #ffa000;
  float: right;
  margin: 0 50px 0 0;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
}
.right-timer-area > span.timer-centered span {
  display: table-cell;/*change to table-cell*/
  line-height: 1;
  vertical-align: bottom;
}
.right-timer-area .timer-sm {
  font-size: 16px;
}

<div class="right-timer-area">
  <span class="timer-centered">
        <span class="timer-big">15</span>
  <span class="timer-sm">m</span>
  <span>-</span>
  <span class="timer-big">45</span>
  <span class="timer-sm">s</span>
  </span>
</div>

Answer 3

You can try like this -

.right-timer-area {
  /*width: 128px;*/
  height: 52px;
  line-height: 52px;
  font-size: 36px;
  font-weight: 300;
  color: #ffa000;
  float: right;
  margin: 0 50px 0 0;
  display: table;
}
.right-timer-area > span.timer-centered {
  height: 36px;
  display: inline-block;
  vertical-align: middle;
  display: table-row;

}
.right-timer-area > span.timer-centered span {
  display: inline-block;
  /*float: left;*/
  line-height: 1;
  vertical-align: bottom;
  display: table-cell;
}
.right-timer-area .timer-sm {
  font-size: 16px;
}

<div class="right-timer-area">
    <span class="timer-centered">
        <span class="timer-big">15</span>
        <span class="timer-sm">m</span>
        <span>-</span>
        <span class="timer-big">45</span>
        <span class="timer-sm">s</span>
    </span>
</div>

I hope it will helps you.