Выравнивание тега p и тега br

Question

Это то, что я хочу. Это то, что я получаю.

Это мой код. У меня проблемы с расстоянием. Я не могу совместить тег p с тегом br. Я также попытался поэкспериментировать с inline, но не повезло.

<p class="one"><b>Field of</b> Select all that apply, hold CTRL when clicking to select multiple items <br>
  <b>study: </b></p><!-- This is where the issue lies. -->

Answer 1

Давайте сделаем это просто,

Используйте float: right, чтобы правильно выровнять "изучение". И это все!

Это ваш код:

.one {
  width: 55px;
  height: 50px;
}

.span {
  float: right;
}

<b>Field of</b>&nbsp;&nbsp;&nbsp;Select all that apply; hold CTRL when clicking to select multiple items
<p class="one">
  <b><span class="span">Study:</span></b>
</p>

CodePen: https://codepen.io/marchmello/pen/abOPJzp?editors=1100

Answer 2

Flexbox идеально подходит для такого размещения. Используйте align-items: center для первого позиционирования

div{
display:flex;
align-items:center;
font-size:19px;
}

#a1{
display:block;
margin-right:14px;
width:64px;
}

<div>
<p id='a1' ><b>Field of <br/>Study </b></p>
<p>Select all that apply, hold CTRL when clicking to select multiple items </p>
</div>

или используйте align-items: flex-start, если вы хотите разместить подобное:

div{
display:flex;
align-items:flex-start;
font-size:19px;
}

#a1{
display:block;
margin-right:14px;
width:64px;
}

<div>
<p id='a1' ><b>Field of <br/>Study </b></p>
<p>Select all that apply, hold CTRL when clicking to select multiple items </p>
</div>

Answer 3

У вас должно быть 2 контейнера, левый жирный текст должен быть в левом контейнере с некоторыми стилями. Нет хорошего способа исправить ваш код для решения вашей проблемы, его проще вообще переписать, как для меня.

Используйте padding для расстояния между текстами и text-align:right; для второй строки, чтобы быть ближе к границе. Взгляните:

.main_text {
   padding-left:5px;
}

.left_text {
  text-align: right;
}

<div style="display:flex">
   <div class='left_text'>
      <b>Field of <br> study: </b>
   </div>
   <div class='main_text'>
      <label> Select all that apply, hold CTRL when clicking to select multiple items</label>
   </div>
</div>