Question

HTML:

<div class="spoiler-content-block">
    <div class="spoiler-inner-content-block">
        <div class="top-block top-block-tight">
            Name
        </div>
        <div class="bottom-block">
            <span class="previous-number">0</span>
        </div>
    </div>
    <div class="spoiler-inner-content-block">
        <div class="top-block">
            Time of last login
        </div>
        <div class="bottom-block">
            <br>
            <span class="previous-number">0</span>
        </div>
    </div>
    <div class="spoiler-inner-content-block">
        <div class="top-block top-block-tight">
            Status
        </div>
        <div class="bottom-block">
            <span class="current-number">0</span><br>
            <span class="previous-number">0</span>
        </div>
    </div>
</div>

CSS:

div.spoiler-content{
    border: 1px solid #DDDDDD;
    padding: 10px;
    white-space: nowrap;
    text-align:center;
}

div.spoiler-content-block{
    display: inline-block;
    border:1px solid #ececec; 
    white-space: normal; 
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

div.spoiler-inner-content-block{
    display:inline-block;
    white-space: nowrap;
}

.top-block{
    border: 1px solid #ececec;
    padding: 5px;
    margin-bottom: 5px;
    height: 30px;
}

.bottom-block{
    border: 1px solid #ececec;
    padding: 5px;
}

Example: http://jsfiddle.net/nonamez/aGQ8F/

The problem is in the <div class="bottom-block"> – when there is one value it goes bottom, how to fix it?

Answer 1

Try adding a vertical-align:top to your div.spoiler-inner-content-block

div.spoiler-inner-content-block{
    display:inline-block;
    white-space: nowrap;
    vertical-align:top;
}

I’ve forked your fiddle