Align div into a list element like a grid

Question

I have this structure:

<ul class="wrap-accordionblk">
<li class="accordionblk-item">
<div class="accordionblk-header">
    <div class="row-fluid">
        <div class="infoblk">
            <label>ID SESSIONE</label><strong>MM-00120853</strong>
        </div>
        <div class="infoblk">
            <label>DATA</label>31/01/16</div>
        <div class="infoblk">
            <label>NOME SESSIONE</label>ferrarif-2B0000118188</div>
        <div class="infoblk">
            <label>ANNO STAGIONE</label>AI 2015</div>
        <div class="infoblk">
            <label>TIPO ORDINE</label>2B</div>
        <div class="infoblk">
            <label>N° CAPI</label>1</div>
        <div class="infoblk">
            <label>VALORE </label>€ 94,92</div>
        <div class="infoblk">
        </div>

        </div>
</div>  
</li>

<li class="accordionblk-item">
    <div class="accordionblk-header">
        <div class="row-fluid">
            <div class="infoblk">
                <label>ID SESSIONE</label><strong>MM-00120854</strong>
            </div>
            <div class="infoblk">
                <label>DATA</label>29/01/16</div>
            <div class="infoblk">
                <label>NOME SESSIONE</label>ferrarif-2B0000118030</div>
            <div class="infoblk">
                <label>ANNO STAGIONE</label>AI 2015</div>
            <div class="infoblk">
                <label>TIPO ORDINE</label>2B</div>
            <div class="infoblk">
                <label>N° CAPI</label>1</div>
            <div class="infoblk">
                <label>VALORE </label>€ 94,92</div>
            <div class="infoblk">
            </div>
            </div>
    </div>  
</li>
</ul>

I have the problem that, if the session name (NOME SESSIONE) have a different number of characters, I have a grid with column not aligned. You can see the result in this jsfiddle here.

How I can modify css to make columns aligned each others also if the string have a different number of characters?

Answer 1

Adding width: 14.25%; to the class .infoblk fixes this. Is there a reason you don't want to assign widths?

.infoblk{
  width: 14.25%;
}