получить метку ошибки для выравнивания с вводом в flex-wrap

Question

В приведенном ниже примере я хотел бы поместить сообщение проверки вертикально в линию с вводом, чтобы точка маркера была приблизительно на одной линии с левой стороной ввода без использования явных значений ширины.

.form-control__input {
  display: flex
}

.form-control__input.form-control__vertical {
  flex-direction: column;
  justify-content: flex-start
}

.form-control__input.form-control__horizontal {
  flex: 1 1;
  flex-wrap: wrap;
  align-items: center
}

.form-control__input.form-control__horizontal .form-control__wrapper {
  flex: 1 1
}

.form-control__input.form-control__horizontal [role=alert] {
  width: 100%
}

<div class="form-control__input form-control__horizontal"><label for="ctrl5" id="ctrl5-label" class="label__default">Horizontal</label>
  <div class="form-control__wrapper"><input autocomplete="off" class="input__default form-control input__invalid" id="ctrl5" aria-invalid="true" aria-describedby="ctrl5-error" maxlength="100" type="text"></div>
  <div id="ctrl5-error" aria-hidden="false" role="alert">
    <ul class="current-errors error-label__container">
      <li data-selector="form-error">foo bar</li>
    </ul>
  </div>
</div>

Answer 1

Я бы использовал display: grid вместо display: flex в этом случае, чтобы вы могли выстроить элемент как таблицу.

Вы можете присвоить имя области каждому div и расположить каждую область в родительском элементе.grid-template-area свойство

.form-control__input.form-control__vertical {
  flex-direction: column;
  justify-content: flex-start
}

.form-control__input .label_default {
      grid-area: label;
}

.form-control__input.form-control__horizontal {
  display: grid;
    grid-template-areas: "label input" ". error";
    grid-template-columns: min-content;
}

.form-control__input.form-control__horizontal .form-control__wrapper {
  grid-area: input;
}

.form-control__input.form-control__horizontal [role=alert] {
  grid-area: error;
}

.form-control__input.form-control__horizontal [role=alert]  ul {
  list-style-position: inside;
    padding-left: 0;
}

<div class="form-control__input form-control__horizontal"><label for="ctrl5" id="ctrl5-label" class="label__default">Horizontal</label>
  <div class="form-control__wrapper"><input autocomplete="off" class="input__default form-control input__invalid" id="ctrl5" aria-invalid="true" aria-describedby="ctrl5-error" maxlength="100" type="text"></div>
  <div id="ctrl5-error" aria-hidden="false" role="alert">
    <ul class="current-errors error-label__container">
      <li data-selector="form-error">foo bar</li>
    </ul>
  </div>
</div>

Answer 2

Самый простой способ добиться этого - заменить flex-wrap: wrap на flex-wrap: nowrap.

В случае, если вы хотите оставить значения flex-wrap до wrap (я не мог спросить в комментариях ) вы можете сделать отдельное div с элементами, которые должны быть wrapped.