Unable to align the button inside the input - html

Question

I want to create an input that contains a button that has an arrow down so the user can click on it to open a list or close it. I can't put the button inside the input, what do i miss here?
.input-wrapper {
position: relative;
}
.combobox-input {
font-size: 16px;
font-weight: normal;
color: #4d4d4d;
background: #ffffff;
border: 1px solid #828995;
height: 30px;
padding: 4px 10px;
}
.combobox-arrow {
display: inline-block;
padding: 6px;
border: none;
background-color: white;
background-image: url(...);
width: 25px;
height: 25px;
}
<div className="input-wrapper">
<input className="combobox-input"/>
<button className="combobox-arrow" ></button>
</div>

Answer 1

Try this and see if it suits your need:
(you can modify the snippet code as per your need)
document.getElementById('caret').addEventListener('click', function() {
// your code here if you want to add some logic
});
button#caret {
border: none;
background: none;
position: absolute;
top: 0px;
right: 0px;
}
.input-wrap {
position: relative;
display: inline;
}
<label>List of places<br/>
<div class="datalist-wrap">
<div class="input-wrap">
<input id="placesText" type="text" name="places" list="places"/>
<button id="caret"> ▼</button>
</div>
<datalist id="places">
<label>Select from the list:
<select name="places" id="select">
<option value="A"></option>
<option value="B"></option>
<option value="C"></option>
</select>
</label>
</datalist>
</div>
</label>