Как выровнять слайдер, текст и значения?

Question

Я пытаюсь выровнять текст слайдера, значение слайдера и значение считывания для 2 слайдеров. Моя попытка без выравнивания с использованием компоновки сетки показана здесь:

И мои соответствующие HTML и CSS:

<div class="rangeslider">
      <label for="tempo">Tempo    </label>
      <input type="range" min="10" max="100" value="30"
              class="myslider" id="tempo">
      <p>bpm: <span id="tempoOut"></span></p>
      <label for="duration">Duration</label>
      <input type="range" min="0.25" max="1" value="0.5" step="0.25"
              class="myslider" id="duration">
      <p>dur: <span id="durOut"></span></p>
   </div>


.myslider {
  -webkit-appearance: none;
  background: rgb(248, 212, 7)  ;
  width: 50%;
  height: 5px;
  opacity: 2;
 } 
.myslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  cursor: pointer;
  background: #34495E  ;
  width: 5%;
  height: 20px;
 }
 .myslider:hover {
  opacity: 1;
}

I знаю, что я могу сделать это с таблицей, но я думаю, что было бы лучше CSS 1009

Здесь есть ответ здесь , где вы можете увидеть / попробовать полный код. Кто-нибудь может предложить относительно простой метод, который работает?

Answer 1

Я получил решение с помощью float: right;

.myslider {
  -webkit-appearance: none;
  background: rgb(248, 212, 7)  ;
  width: 70%;
  height: 5px;
  opacity: 2;
  float: right;
}

Вот как это выглядит: