Как отобразить метку над списком с множественным выбором? ⇐ CSS

[Anonymous]

У меня есть два поля выбора с несколькими вариантами выбора и JavaScript для перемещения элементов между полями. Я хочу добавить метку к полям, которые отображаются над каждым из списков, но не могу заставить работать CSS.
Ниже показано, как выглядит пользовательский интерфейс с добавленными полями без добавления метки к элементу:


А ниже вот это как выглядит изображение с добавленной меткой:


Код, который я сейчас использую для создания изображения с добавленной меткой, приведен ниже:

Код: Выделить всё

.addprop-container {
display: flex;
align-items: center;
justify-content: center;
}

.addprop-container label {
display: flex;
flex-direction: column;
}

.listbox {
width: 250px;
height: 300px;
text-align: left;
}

.buttons {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
}

.buttons button {
margin-bottom: 10px;
background-color: black;
color: white;
border-radius: 50px;
font-size: larger;
font-weight: bold;
}

Код: Выделить всё

Available Properties:

Test Line 1
Test Line 2
Test Line 3
Test Line 4
Test Line 5
Test Line 6
Test Line 7
Test Line 8



 >> 
 > 
 < 
 

Подробнее здесь: [url]https://stackoverflow.com/questions/79082519/how-to-display-label-above-a-multiple-select-listbox[/url]