Align label with Checkbox horizontally

Question

I'm new in this forum and i found a problem i really don't know how to resolve.

I have a table with a checkbox list. And everything is ok. i used:

    display:inline-block;

And the label look align but in small devices like mobile phones i would like instead to appear:

"[] Other                   
 Unknown"                                 

I would like to align the label like this:

 "[] Other
     Unknown"

How could i align the label to appear like that?

https://jsfiddle.net/apastorts/d9efnf08/

Answer 1

You just have to add CSS like td.cstm-cls {display: flex;}

body{width:40%;}
label{display:inline;font-size:11px;}
td.cstm-cls {
  display: flex;
}

  <table class='table'>
      <thead>
        <h3>Crane Brand</h3>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Demag'><label>Demag</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Kone'><label>Kone</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Starluff'><label>Starluff</label></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Gis'><label>Gis</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='JDN Monocrane'><label>JDN Monocrane</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Monosteel'><label>Monosteel</label></input></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Litfking'><label>Litfking</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Atlas Copco'><label>Atlas Copco</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Ingersoll Rand'><label>Ingersoll Rand</label></input></input>
        </tr>
        <tr>
          <td><input type="checkbox" name="craneBrands[]"  value='Hitachi'><label>Hitachi</label></input></td>
          <td><input type="checkbox" name="craneBrands[]"  value='Kito'><label>Kito</label></input></td>
          <td class="cstm-cls"><input type="checkbox" name="craneBrands[]"  value='Other/Unknown'><label>Other / Unknown</label></input></td>
        </tr>
      </tbody>
    </table>