テキストボックスの中にボタンを入れたい

Question

現在の状態ですと、テキストボックスの外（テキストボックスの右側）に出てしまっていて、
テキストボックスの中にボタンをいれたいのですが、どうすればいいのでしょうか？

<input type="text" class="textbox" name="valueFrom_1000000" id="valueFrom_1000000" autocomplete="on" list="freeword_1000000" onchange="getSelectElement_free('1000000')">
<datalist id="freeword_1000000"><option value="大型"></option><option value="小型"></option></datalist>
<button type="button" name="clearButton" class="clearButton"></button>

Answer 1

適当にラップして微妙な位置調整をすればよいのでは？

<style>
.wrap{position:relative;width: max-content;}
.wrap .clearButton{position:absolute;bottom:3px;right:3px;}
</style>
<div class="wrap">
<input type="text" name="valueFrom_1000000" id="valueFrom_1000000" autocomplete="on" list="freeword_1000000">
<datalist id="freeword_1000000">
<option value="大型"></option>
<option value="小型"></option>
</datalist>
<button type="button" name="clearButton" class="clearButton"></button>
</div>