Нумерованный упорядоченный список должен находиться на той же вертикальной линии, что и элемент выбора.

Question

Я бы хотел, чтобы выбранный список отображался на той же высоте, что и элемент select.

Если я уберу отступ слева, то выбор будет слишком левым.

С отступом влево это слишком далеко вправо.

Я также не хочу давать приблизительное количество пикселей для отступа слева для решения проблемы. Есть ли более элегантное решение?

.flex {
  display:flex;
  flex-wrap: wrap;
  align-items:center;
}

.flex > div {
  flex-basis:100%;
  margin-bottom: 30px;
  background-color: #555;
  height: 50px;
}

.flex > div span {
  display: inline-block;
  width: 50%;
} 

.flex > div > ol {
  display: inline-block;
}

<div class="flex">
  <div>
    <span>Lorem Ipsum</span>
    <select name="" id="">
      <option value="loremIpsum">Lorem Ipsum</option>
    </select>
  </div>
  
  <div>
    <span>Lorem</span>
    <ol>
      <li>
        <select name="" id="">
      <option value="lorem">Lorem</option>
    </select>
      </li>
    </ol>
  </div>
</div>

Answer 1

Я бы сделал так, проверив код, и вы увидите, что я обернул их в родительский div и дал ему отображение flex и определил ширину для first элемента тогда автоматически элемент second начнётся в той же строке и точно определит стиль ol

padding: 0;
list-style-position: inside;

https://jsfiddle.net/62q6zrnr/2

   .one,
    .two {
      background-color: #ddd;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 30px;
    }

    .base {
      width: 50%;
      flex-basis: 50%;
    }


    ol {
     padding: 0;
     list-style-position: inside;
   }

  <div class="one">
  <p class="base">lorem</p>
  <select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</div>
<div class="two">
<p class="base">lorem 2</p>
    <ol>
      <li>
      <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
        <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
           <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
        <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
      <li>
           <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      </li>
    </ol>
</div>