How to align select and select box while select's position changed

Question

I found a fun problem with the native html select element. when you click the select, after it the select's position change, but the box under the select won't change it's position to align with it.

Here is a simple code sample.

 (() => { setTimeout(() => { document.getElementById('span').innerText = "Test of metal"; }, 3000) })() 

 <div> <span id="span"></span> <select> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> 

how to make the box align with the select itself? Is there any solution?

Answer 1

Try this:

  (() => { setTimeout(() => { document.getElementById('span').innerText = "Test of metal", document.getElementById('select_id'); }, 3000) })() 

 <div> <span id="span"></span> <select id="select_id"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </div> 

change the 3000 value to faster the text shows up