How to unlink 2 elements in input?

Question

css

Hi all!

Faced with a child's problem, but I can not solve.



It is necessary that the checkbox be to the right of the inscription "Your city" code example below!

<div class="input">
                            <input type="hidden" name="address" required>
                                    <select class="form-select" size="1" aria-label="size 1 select example" name="address">
                                    <option value="Нур-Султан" selected>Нур-Султан</option>
                                    <option value="Караганда">Караганда</option>
                            </select>
                            <span>Ваш город</span>
                         </div>

form .input {
    position: relative;
    border-bottom: 1px solid #88C3DC;
    margin-bottom: 30px;
}

Answer 1

You would still just throw off the picture, and not a piece of code. The code must be thrown > the entire form on the codepen.
You have shit layout. No need to invest in select inputs, given that each one does its job.
In order to make such a select, you take a label, write text into it, and either align select with flexes on the right side, or set position: absolute; right: 0;
Before that, pre-setlabel position: relative