Итак, я знаю, что вопрос звучит очень запутанно, но у меня есть изображение, чтобы продемонстрировать, чего я хочу достичь. Изображение: 
Часть, с которой у меня возникли проблемы, - это выравнивание частей выделения так, чтобы они «начинались» в одном и том же месте, чтобы не было беспорядка. например, если бы вы поместили линейку на экран, все они бы начинались с одного и того же места. И та же проблема для текста, который выглядит неаккуратно, поскольку слова имеют разную длину.
Я пробовал использовать отступы, css сетки и т.д. c. но мне не повезло - я не чувствую, что мне нужно добавлять его, потому что ничего из этого не работает, но я могу, если нужно.
Мой HTML выглядит следующим образом:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel="stylesheet" href="main.css">
<title>Document</title>
</head>
<body>
<h1>Solve the case!</h1>
<div class="who-container">
<h2 class="who">Who </h2>
<select class="who" id="who">
<option>‘Small’ Paul Romano</option>
<option>Steven Smith aka The Black Widow</option>
<option>Ronnie ‘The Face’ Jones</option>
<option>Joe Sharp</option>
</select>
</div>
<div class="where-container">
<h2 class="where">Where </h2>
<select class="where" id="where">
<option>Mount Road</option>
<option>Coronation Street</option>
<option>Windsor Drive</option>
<option>Back Street</option>
<option>Queens Close</option>
<option>Gladstone Road</option>
<option>Kings Road</option>
<option>Devon Road</option>
<option>The Pines</option>
<option>Saxon Way</option>
<option>Alexandra Street</option>
<option>The Grange</option>
<option>Gloucester Road</option>
<option>Larch Close</option>
<option>Cedar Close</option>
<option>Orchard Grove</option>
<option>Robin Close</option>
<option>Third Avenue</option>
<option>Crescent Road</option>
<option>Heath Lane</option>
<option>Church Way</option>
<option>South Drive</option>
<option>Herbert Street</option>
<option>Bedford Street</option>
<option>Ash Grove</option>
<option>St Peter's</option>
<option>Road Thornton</option>
<option>Road Avenue</option>
<option>Road Parkway</option>
<option>North Street</option>
<option>Hazel Grove</option>
<option>Shaftesbury Road</option>
<option>Oak Tree</option>
<option>Close Juniper</option>
<option>Close Heron</option>
<option>Close St</option>
<option>Paul's Road</option>
<option>Meadow Way</option>
<option>Wordsworth Avenue</option>
<option>Woodland Way</option>
<option>Windsor Avenue</option>
<option>Stanley Street</option>
<option>The Moorings</option>
<option>Wellington Street</option>
<option>Edward Street</option>
<option>Poplar Drive</option>
<option>Trinity Close</option>
<option>Railway Terrace</option>
<option>Oak Close</option>
<option>The Fairway</option>
<option>Hall Street</option>
</select>
</div>
<div class="when-container">
<h2 class="when">When </h2>
<select class="when" id="when">
<option>00:00 - 00:30</option>
<option>00:30 - 01:00</option>
<option>01:00 - 01:30</option>
<option>01:30 - 02:00</option>
<option>02:00 - 02:30</option>
<option>02:30 - 03:00</option>
<option>03:00 - 03:30</option>
<option>03:30 - 04:00</option>
<option>04:00 - 04:30</option>
<option>04:30 - 05:00</option>
<option>05:00 - 05:30</option>
<option>05:30 - 06:00</option>
<option>06:00 - 06:30</option>
<option>06:30 - 07:00</option>
<option>07:00 - 07:30</option>
<option>07:30 - 08:00</option>
<option>08:00 - 08:30</option>
<option>08:30 - 09:00</option>
<option>09:00 - 09:30</option>
<option>09:30 - 10:00</option>
<option>10:00 - 10:30</option>
<option>10:30 - 11:00</option>
<option>11:00 - 11:30</option>
<option>11:30 - 12:00</option>
<option>12:00 - 12:30</option>
<option>12:30 - 13:00</option>
<option>13:00 - 13:30</option>
<option>13:30 - 14:00</option>
<option>14:00 - 14:30</option>
<option>14:30 - 15:00</option>
<option>15:00 - 15:30</option>
<option>15:30 - 16:00</option>
<option>16:00 - 16:30</option>
<option>16:30 - 17:00</option>
<option>17:00 - 17:30</option>
<option>17:30 - 18:00</option>
<option>18:00 - 18:30</option>
<option>18:30 - 19:00</option>
<option>19:00 - 19:30</option>
<option>19:30 - 20:00</option>
<option>20:00 - 20:30</option>
<option>20:30 - 21:00</option>
<option>21:00 - 21:30</option>
<option>21:30 - 22:00</option>
<option>22:00 - 22:30</option>
<option>22:30 - 23:00</option>
<option>23:00 - 23:30</option>
<option>23:30 - 00:00</option>
</select>
</div>
<div class="what-container">
<h2 class="what">What </h2>
<select class="what" id="what">
<option>Candlestick</option>
<option>Pipe</option>
<option>Knife</option>
<option>Gun</option>
<option>Baseball Bat</option>
<option>Spanner</option>
<option>Hammer</option>
<option>Rope</option>
<option>Brick</option>
<option>Golf Club</option>
</select>
</div>
<div class="date-container">
<h2 class="date">Date </h2>
<input type="text" name="date" id="date">
</div>
<button onclick="submit()">Solve</button>
</body>
<script src="external/jquery/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$( "#date" ).datepicker();
$.datepicker.setDefaults({
dateFormat: 'dd/mm/yy'
});
$( "#date" ).datepicker("setDate", new Date(2020,01,01));
</script>
<script src="form-handler.js"></script>
</html>
И мой CSS (НЕ РАБОТАЕТ !!!):
.who-container, .where-container, .when-container, .what-container, .date-container{
text-align: left;
}
.who, .where, .when, .what, .date{
text-align: right;
display: inline-block;
padding-right: 20%
}
h2{
padding-left: 40%;
}