make one div have the same width as another one

Question

I have two divs, and one of has data coming from api, and its width changes depending on how much text/numbers are returned from api.

Im trying to make another div align itself according to what the first div's width is.

This is the html structure


First Text



    First Text
 


    ${API_DATA}

Each div has a styling of:

display: grid;
grid-template-columns: 1fr auto;

with two columns as this is the structure

how can i make it have the same width as the last div no matter how long the data is?

user_14807111 · Answer

You can use for this case the CSS property: display: inline-block. Assign it to the h5 Element for example.

.test {
  display: inline-block;  
  background: gray;
  margin: 10px;
  padding:10px;
  height:100px;
  width:100px;
}


  
    First Text
  

  
      First Text
   

  
      ${API_DATA} 123

user_18442536 · Answer

with javascript :

let divs = document.getElementsByClassName("test")

for (let i = 0; i < divs.length; i++) {
  divs[i].style.width = 50
}