Unable to position the UL with the input - html

Question

I want to position the list under the input, what is wrong by my css?
See Example
In this example the nested menu is positioned too far to the left and a little too high (it should start vertically where the containing menu ends).
.combobox-wrapper {
position: relative;
width: 20em;
min-height: 1.5em;
display: flex;
align-items: center;
width: 100%;
display: flex;
flex-direction: row;
}
.combobox-label {
width: 50%;
padding-top: 0.5em;
}
.combobox-input {
font-size: 16px;
font-weight: normal;
height: 30px;
padding: 4px 10px;
width: 50%;
}
.combobox-options {
position: absolute;
margin: 0;
padding: 0;
list-style: none;
max-height: 15em;
overflow-y: auto;
left: 0;
top: calc(100% + 0.25em);
z-index: 100;
display: block;
}
.combobox-option {
padding: 0.25em 0.5em;
cursor: pointer;
position: relative;
}
<div class="combobox-wrapper">
<label for="combobox-input" class="combobox-label">
Countries
</label>
<input id="combobox-input" />
<ul id="combobox-listbox" role="listbox" class="combobox-options">
<li tabindex="0" id=":rl:-BZ" role="option" value="BZ" class="combobox-option highlighted"><span>Belize</span></li>
<li tabindex="0" id=":rl:-BJ" role="option" value="BJ" class="combobox-option"><span>Benin</span></li>
</ul>
</div>
```

Answer 1

I don't know if you mean this or not but you can try this:
index.html
<div class="combobox-wrapper">
<div>
<label for="combobox-input" class="combobox-label">
Countries
</label>
<input id="combobox-input" />
</div>
<div>
<ul id="combobox-listbox" role="listbox" class="combobox-options">
<li tabindex="0" id=":rl:-BZ" role="option" value="BZ"
class="combobox-option highlighted"><span>Belize</span></li>
<li tabindex="0" id=":rl:-BJ" role="option" value="BJ"
class="combobox-option"><span>Benin</span></li>
<li tabindex="0" id=":rl:-BM" role="option" value="BM"
class="combobox-option"><span>Bermuda</span></li>
<li tabindex="0" id=":rl:-BT" role="option" value="BT"
class="combobox-option"><span>Bhutan</span></li>
<li tabindex="0" id=":rl:-BO" role="option" value="BO"
class="combobox-option"><span>Bolivia</span></li>
<li tabindex="0" id=":rl:-BA" role="option" value="BA"
class="combobox-option"><span>Bosnia and Herzegovina</span></li>
<li tabindex="0" id=":rl:-BW" role="option" value="BW"
class="combobox-option"><span>Botswana</span></li>
<li tabindex="0" id=":rl:-BV" role="option" value="BV"
class="combobox-option"><span>Bouvet Island</span></li>
<li tabindex="0" id=":rl:-BR" role="option" value="BR"
class="combobox-option"><span>Brazil</span></li>
<li tabindex="0" id=":rl:-IO" role="option" value="IO"
class="combobox-option"><span>British Indian Ocean Territory</span></li>
<li tabindex="0" id=":rl:-BN" role="option" value="BN"
class="combobox-option"><span>Brunei Darussalam</span></li>
<li tabindex="0" id=":rl:-BG" role="option" value="BG"
class="combobox-option"><span>Bulgaria</span></li>
</ul>
</div>
</div>
style.css
.combobox-wrapper {
position: relative;
width: 20em;
min-height: 1.5em;
display: flex;
align-items: center;
border-radius: var(--form-field-border-radius);
outline: none;
background-color: white;
width: 100%;
display: flex;
flex-direction: column;
}
.combobox-label {
color: var(--color-text-dark-gray);
padding-top: 0.5em;
}
.combobox-input {
font-size: 16px;
font-weight: normal;
color: #4d4d4d;
background: #ffffff;
border: 1px solid #828995;
height: 30px;
padding: 4px 10px;
width: 50%;
}
.combobox-options {
list-style: none;
max-height: 15em;
overflow-y: auto;
border: 0.05em solid var(--color-bg-gray);
border-radius: var(--form-field-border-radius);
left: 0;
top: calc(100% + 0.25em);
background-color: var(--color-white);
z-index: 100;
display: block;
}
.combobox-option {
padding: 0.25em 0.5em;
cursor: pointer;
}