CSS: Как правильно построить блок?

Question

[Millerish]

Доброе время суток!

Мне нужно строить блок при выполнении функции. Примерно такой(3 на 1):



В функцию будет передаваться два параметра, вертикальные и горизонтальные перемычки.

Сейчас я пробую строить таким вариантом:

for( j=1; j<=horizontal_pereochki_count; j++){
   $('*[data-id="' + i + '"]').append('<span class="paintingInDiadrammaPereochki" style="width: ' + w + '%; height: ' + h + '%">H</span>');
}
for( j=1; j<=vertikalnue_pereochki_count; j++){
   $('*[data-id="' + i + '"]').append('<span class="paintingInDiadrammaPereochki" style="width: ' + w + '%; height: ' + h + '%">V</span>');
}

Но выходит совсем не так ((( Контейнер пробую флекс.
Как правильно?

Answer 1

[Nwton]

https://jsfiddle.net/vunp578q/3/