make one div have the same width as another one-CodePudding

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 an explanation

This is the html structure

<div>
<h5 >First Text</h5>
</div>

<div>
    <h5 >First Text</h5>
 </div>

<div>
    <h5 >${API_DATA}</h5>
 </div>

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?

CodePudding user response：

with javascript :

let divs = document.getElementsByClassName("test")

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

CodePudding user response：

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;
}

<div >
  <div >
    <h5 >First Text</h5>
  </div>

  <div >
      <h5 >First Text</h5>
   </div>

  <div >
      <h5 >${API_DATA} 123</h5>
   </div>
</div>