Сверстать блок так чтобы М(рис.) должно быть в 4 случаях одно число и в процентах

Пытаюсь сделать так как показано на картинке. Число М одинаковое во всех случаях и задумано в процентах. Я новичок, поэтому полагаю что упускаю из вида всем известную формулу, которая в два счета подсчитает это число М. Если есть другие варианты решение данной задачи, буду рад ознакомится.

Примерный код получился ниже. Вот только вместо 4% в

 .box-M {
    width: 4%;
}

должно быть число М. Заранее спасибо!

.box {
    width: 100%;
    height: 44px;
}
.box div{
    float: left;
    height: 44px;
}
.box div:nth-child(even) {
    background-color: red;
    width: 44px;
}
.box div:nth-child(odd) {
    background-color: black;
}
.box div:first-child,
.box div:last-child {
    width: 7.5%;
}
.box-M {
    width: 4%;
}
</style>
<div class="box">
    <div></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div class="box-M"></div>
    <div></div>
    <div></div>
</div>