Чтобы выровнять элементы с обеих сторон с помощью Tailwind CSS, вы можете использовать класс `flex` вместе с классами `justify-between` или `justify-around`. Эти классы создают гибкое контейнерное поведение и обеспечивают равномерное распределение пространства между элементами.
Вот пример создания адаптивного элемента формы с выпадающим списком, в котором отображается статус. В этом примере выпадающий список будет содержать различные статусы, и мы используем Tailwind CSS для стилизации:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Форма с выпадающим списком</title>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen">
<div class="bg-white p-6 rounded shadow-md w-80">
<form>
<div class="flex justify-between items-center mb-4">
<label for="status" class="block text-gray-700">Статус:</label>
<select id="status" class="ml-4 p-2 border border-gray-300 rounded">
<option>Выберите статус</option>
<option value="active">Активен</option>
<option value="inactive">Неактивен</option>
<option value="pending">В ожидании</option>
<option value="completed">Завершен</option>
</select>
</div>
<button type="submit" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Отправить</button>
</form>
</div>
</body>
</html>
```
### Объяснение кода:
1. Используется `flex` для выравнивания элементов в контейнере формы.
2. Класс `justify-between` позволяет распределить пространство между ярлыком и выпадающим списком.
3. Используется класс `ml-4` (margin-left), чтобы добавить отступ между ярлыком и выпадающим списком.
4. Кнопка имеет классы `bg-blue-500` и `hover:bg-blue-600` для стилизации фона и эффекта наведения.
5. Контейнер формы имеет тени и закругленные края для улучшенного оформления.
Этот код создает адаптивный элемент формы, который будет корректно отображаться на различных устройствах.