У меня есть группа флажков. Которые в центре выровнены с флажками сверху и текстом ниже. Вот что я имею в виду:

Поэтому я хочу выровнять

Таким образом, каждый флажок + метка оборачивается в div с классомchoice, Всеchoice Div являются частью Div сadditional-info. choice div - это встроенные блочные элементы с фиксированной шириной.

Как мне выровнятьdiv выбор быть на той же высоте, что и первый?

Я пытался установитьadditional-info положение относительно иchoice в абсолют. Но потом они накладываются друг на друга, так что это не хорошо.

Также попытался установитьchoice div выводится на inline, но затем текущая разметка разрывов и div отображаются в середине в три строки.

Также пытался установитьadditional-info отобразить в ячейке таблицы и добавить вертикальное выравнивание сверху, но это тоже не сработало.

Что еще я могу попробовать? любые предложения приветствуются

Обновить :

Вот мой HTML:

<div class="additional-info">
  <p class="text required control-label">
    Additional info
  </p>
  <div class="input boolean optional certificate"><input name="user[certificate]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="certificate"><input class="boolean optional require-one" id="certificate" name="user[certificate]" type="checkbox" value="1">I've got a valid certificate and permits</label></div>
  <div class="input boolean optional no_garden"><input name="user[no_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="no_garden"><input class="boolean optional require-one" id="no_garden" name="user[no_garden]" type="checkbox" value="1">I don't have garden</label></div>
  <div class="input boolean optional has_garden"><input name="user[has_garden]" type="hidden" value="0"><label class="boolean optional control-label checkbox" for="has_garden"><input class="boolean optional require-one" id="has_garden" name="user[has_garden]" type="checkbox" value="1">I have a garden</label></div>
</div>

Некоторые CSS:

.additional-info {
  position: relative;
}

.additional-info div {
  width: 32.6%;
  display: inline-block;
  text-align: center;
}

input[type="checkbox"] {
  float: none;
  display: block;
  margin: 0 auto;
}