Выпадающая рамка HTML и CSS с текстовым полем рядом с ней

Question

У меня немного проблемы, я пытаюсь создать раскрывающийся список, который соединяется с текстовым полем рядом с ним. Я везде искал, и не могу найти что-то подобное. Он должен выглядеть следующим образом:

Как я могу это сделать?

Answer 1

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select><input type="text"> 

Answer 2

попробовать что-то вроде этого:

select, 
 
input { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; 
 
} 
 
select { 
 
    height: 30px; 
 
    border-radius: 20px 0 0 20px; 
 
    padding-left: 5px; 
 
    border-right: 0; 
 
} 
 
input { 
 
    height: 28px; 
 
    border-radius: 0 20px 20px 0; 
 
    padding-left: 5px; 
 
}

<select> 
 
    <option>Option 1</option> 
 
    <option>Option 2</option> 
 
    <option>Option 3</option> 
 
    <option>Option 4</option> 
 
</select><input type="text" />