Как сверстать блок как на картинке?

Как-то так, если на скорую руку.

<style>
    .container{
        background-color: green;
        color: #ffffff;
        float: left;
        width: 100%;
    }
    .container:after {
        display: block;
        content: '';
        clear: both;
    } 
    .b {
        font-weight: bold;
        font-size: 20px;
    }
    .l {
        font-size: 15px;
    }
    li {
        float: left;
        text-align: center;
        width: 100px;
        border-left: 1px solid #fff;
        box-sizing: border-box;
    }
    li:last-child {
        border-right: 1px solid #fff;
    }
    ul {
        display: block;
        margin: auto;
        list-style-type: none;
        width: 500px;
    }
</style>
<div class="container">
    <ul>
        <li><p class="b">42</p><p class="l">Lorem</p></li>
        <li><p class="b">125</p><p class="l">Lorem</p></li>
        <li><p class="b">15</p><p class="l">Lorem</p></li>
        <li><p class="b">99</p><p class="l">lorem</p></li>
        <li><p class="b">25</p><p class="l">Lorem</p></li>
    </ul>
</div>

Легче всего сделать через таблицу
codepen.io/anon/pen/QNypzg

Если добавить чуть больше текста к решению Павла, то будет вот это:
codepen.io/anon/pen/YqwZbz
И не совсем понятно, зачем контейнеру задавать float:left; и потом width:100%;. Элементам li можно задать display:inline-block;. Меньше float, меньше проблем.