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

Question

[Dmitriy Kritskiy]

Не могу понять, как лучше это делать.....
либо через ненумерованный список, либо сделать дивы, потом их выстраивать... Хочу услышать хорошего совета, для будущей практики))
так же прошу обратить внимание, на то, что там есть бордеры...

Answer 1

[Павел]

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

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

Answer 2

[Сергей Тутуков]

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

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