CSS - выровнять текст по div

Question

Я борюсь с выравниванием текста по div.

У меня сейчас есть это:

Но я хочу добиться этого (я только что отредактировал скриншот, чтобы показать вам, что я имею в виду):

Мой код выглядит следующим образом:

HTML

<div class="regionHeader">
    <div class="regionArrow"></div>
    <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

CSS

.regionHeader {
    border-bottom: 1px solid #ffd800;
    cursor: pointer;
}

.regionArrow {
    border-right: 4px solid #ffd800;
    border-bottom: 4px solid #ffd800;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    float: left;
    margin-top: 11px;
    margin-right: 13px;
    margin-bottom: 0px;
    margin-left: 3px;
}

h2 {
    font-family: changa-regular;
    font-size: 2em;
}

Я уже играл с дисплеем и поплавками, но он либо не работает, либо я делаю это неправильно.

Answer 1

Вы можете просто использовать padding-left в своем заголовке:

.regionHeader {
  border-bottom: 1px solid #ffd800;
  cursor: pointer;
}

.regionArrow {
  border-right: 4px solid #ffd800;
  border-bottom: 4px solid #ffd800;
  width: 12px;
  height: 13px;
  transform: rotate(45deg);
  float: left;
  margin-top: 11px 13px 0 3px;
}

h2 {
  font-size: 2em;
  padding-left: 1.2em; /* <- added */
}

<div class="regionHeader">
  <div class="regionArrow"></div>
  <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

Или используйте подход flexbox и удалите float.

.regionHeader {
  border-bottom: 1px solid #ffd800;
  cursor: pointer;
  display: flex; /* <- added */
}

.regionArrow {
  border-right: 4px solid #ffd800;
  border-bottom: 4px solid #ffd800;
  width: 16px;
  height: 13px;
  transform: rotate(45deg);
  margin: 30px 15px;
}

h2 {
  font-family: changa-regular;
  font-size: 2em;
}

<div class="regionHeader">
  <div class="regionArrow"></div>
  <h2>Some long header that should be aligned to the left next to the div with arrow</h2>
</div>

Поддержка браузера для flexbox довольно хорошая. Не забудьте добавить правильные префиксы поставщиков.