Ввести флажки в той же строке, что и метка флажка

Question

Я работаю с очень сложным WordPress их и пытаюсь настроить одну область, которая не сотрудничает.На боковой панели шириной 380px есть переключатель выбора для виджета поиска, который ищет местоположения на основе определенных предлагаемых удобств.Метка для некоторых из этих флажков длиннее, чем широкая боковая панель, и когда это происходит, текст начинается со следующей строки самого флажка, где мы предпочли бы, чтобы он оставался на той же строке и переносился с конца.

Вот изображение текущей проблемы:

<span class="goption">
<label class="options">
<input type="checkbox" name="field1231091388[]" value="value">
<span class="checkbox">
</span>
</label>
<label for="field1231091388">
Circulation Path (A Continuous And Unobstructed Way Of Travel From Any Point In A Building Or Structure To A Public Way)
</label>
</span>

Без изменения размера боковой панели, как я могу убедиться, что флажок остается справа от метки и разрывается в конце строки, а не в начале метки?Как это:

цель

Answer 1

Используйте bootstrap для удобного макета:)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkboxDefault checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>

Answer 2

Попробуйте обернуть метку и ввод в div и установить отображение div как flex.

<div style="display: flex;">
    <input type="checkbox"/>
    <label>Lorem lorem em lorem loremLorem lorem lorem Lorem lorem lorem</label>
</div>

Если это то, что вы пытаетесь достичь