Align div to start at the center of row

Question

My intention is this:

Sadly I cannot figure out how to align this the way I want to, other than with margin. The issue is with the row with button. I want to align the div with id="info" to start at the center of the row (id="row").

This is the current state and the code, below.

<div class="d-flex align-items-center" id="row">

    <div class="radio-btn">
        
    </div>

    <div style="margin-left: 2em; margin-right: 2em; width: 50px;">
        <img src='xy.png' style="max-width: 100%; max-height: 100%;">
    </div>

    <div id="info">

        <div> SAMPLE TEXT </div>
        <div><button>SELECT PICKUP</button></div>


    </div>
</div>

Since I am trying to generate multiple lines like this in a for loop, I do not want to complicate things with if / else statements.

Is there a different way to achieve this, some kind of align option I am not aware of? Or should I just use margin for the rows with buttons?

Answer 1

Here's the code for your question. You can add just a few css for this.

The screenshot of the result:

Check the full code below. I used SVG instead of img since it doesn't work in the current code.

#row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#info {
  position: relative;
}

#info>div:last-child {
  position: absolute;
  width: max-content;
  margin-top: 5px;
}

<div class="d-flex align-items-center" id="row">

  <div class="radio-btn">
  </div>
  <div style="margin-left: 2em; margin-right: 2em; width: 50px;">
    <svg class="Icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="height: 50px; width: 50px;"><path d="M0 0h512v512H0z" fill="#000" fill-opacity="1"></path><g class="" transform="translate(0,0)" style=""><path d="M256 24.585L51.47 118.989 256 213.394l204.53-94.405zM38.998 133.054v258.353L247 487.415V229.063zm434.004 0L265 229.062v258.353l208.002-96.008z" fill="#fff" fill-opacity="1"></path></g></svg>
  </div>

  <div id="info">
    <div> SAMPLE TEXT </div>
    <div><button>SELECT PICKUP</button></div>
  </div>
</div>