Symfony - EntityType rendering - html

Question

I have a form which have a field of type EntityType named categories that is showing like this :
each one is placed in the bottom of the other, i want them to be displayed by group of 2 like this :
anyone have an idea how to do that with Symfony and Twig ?
EDIT :
here is the html code produced by the twig engine for that field
<form name="form" method="post">
<button type="submit" name="rechercher" class="btn btn-success">Rechercher</button>
<div id="form">
<div class="form-group">
<label class="control-label" for="form_motcle">Mot Clé</label>
<input type="text" id="form_motcle" name="form[motcle]" class="form-control" />
</div>
<div class="form-group">
<label class="control-label">Categories</label>
<div id="form_categories">
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_1" name="form[categories][]" value="1" /> Théatre (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_2" name="form[categories][]" value="2" /> Cinema (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_3" name="form[categories][]" value="3" /> Comédie (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_4" name="form[categories][]" value="4" /> Spectacle (0)
</label>
</div>
</div>
</div>
</div>
</form>

Answer 1

You can solve this with a little CSS already. For information and usage of flexbox I always suggest this article.
What this code does is basically the following:
Define #form_categories as somewhat of a container. Elements inside should be placed from left to right (row) and if they reach the end, should use a new line (wrap).
Each div which holds a checkbox (#form_categories > .checkbox) has a width of 50%, so you will have 2 divs per "row".
The advantage of an approach like this is that you can use media queries and change width: 100%; of a single div so it has its own row (e.g. on mobile displays).
#form_categories {
display: flex;
flex-flow: row wrap;
width: 100%;
}
#form_categories > .checkbox {
width: 50%;
}
<div id="form_categories">
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_1" name="form[categories][]" value="1" /> Théatre (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_2" name="form[categories][]" value="2" /> Cinema (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_3" name="form[categories][]" value="3" /> Comédie (0)
</label>
</div>
<div class="checkbox">
<label class="">
<input type="checkbox" id="form_categories_4" name="form[categories][]" value="4" /> Spectacle (0)
</label>
</div>
</div>