How can I right-align two divs in a Bootstrap column?

Question

How could I right align two DIVs, and their content staying stacked, within a column contained in a row?

An image of what I'm trying to roughly accomplish is below:

A sample codeply can be found here that contains the HTML and CSS below. This codeply forked from the original gets me close, but doesn't keep the content stacked, nor keeps the content middle aligned.

With the HTML and CSS below I've tried adding d-flex and flex-row onto the col-sm-4 DIVs, but that doesn't allow the content within the children DIVs to stay stacked and I'm unable to right align the child elements. Also the middle alignment is lost. I've also tried containing everything within DIV 1 and 2 in parent DIVs and doing d-flex with justifiy-content-end. That also isn't accomplishing what I'm looking for.

.main-container{
    background-color: #F5F5F5;
    height:100px;
}

.clickable-link {
    font-size:10px;
}

.content-section-one {
    border-right: 2px solid black;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid main-container">
    <div class="row justify-content-between align-items-center">
        <div class="col-sm-4">
            <!-- DIV #1 -->
            <div class="content-section-one">
                <div>
                    <span><i class="fas fa-user-circle"></i></span>
                    <span>Some Text Here</span>
                </div>
                <div>
                    <a class="clickable-link" href="#">Clickable Link</a>
                </div>
            </div>
            
            <!-- DIV #2 -->
            <div>
                <div>
                    <span><i class="fas fa-map-marker-alt"></i></span>
                    <span>Some More Text Here</span>
                </div>
                <div>
                    <a class="clickable-link" href="#">Clickable Link</a>
                </div>
            </div>
        </div>
        
        <div class="col-sm-4">
            <p>A Completely Separate Section</p>
        </div>
    </div>
</div>

Answer 1

I'm guessing at some of your parameters, but a nested row with columns set to not grow seems to work. Notice the text-nowrap class on some of the text elements.

.main-container {
  background-color: #F5F5F5;
  height: 100px;
}

.clickable-link {
  font-size: 10px;
}

.content-section-one {
  border-right: 2px solid black;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container-fluid main-container">
  <div class="row justify-content-between align-items-center">
    <div class="col">
      <div class="row justify-content-left">
        <div class="col flex-grow-0 text-right">
          <div>
            <span><i class="fas fa-user-circle"></i></span>
            <span class="text-nowrap">Some Text Here</span>
          </div>

          <div>
            <a class="clickable-link" href="#">Clickable Link</a>
          </div>
        </div>

        <div class="col flex-grow-0 text-right border-right border-dark">
          <div>
            <span><i class="fas fa-map-marker-alt"></i></span>
            <spann class="text-nowrap">Some More Text Here</span>
          </div>

          <div>
            <a class="clickable-link" href="#">Clickable Link</a>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <p>A Completely Separate Section</p>
    </div>
  </div>
</div>

Answer 2

you can try this and cheng it in your local

<div class="container-fluid main-container">
<div class="row justify-content-end align-items-center">
    <div class="col-sm-4 d-flex flex-row-reverse">
        <!-- DIV #1 -->
        <div class="content-section-one">
            <div>
                <span><i class="fas fa-user-circle"></i></span>
                <span>Some Text Here</span>
            </div>
            <div>
                <a class="clickable-link" href="#">Clickable Link</a>
            </div>
        </div>
        
        <!-- DIV #2 -->
        <div>
            <div>
                <span><i class="fas fa-map-marker-alt"></i></span>
                <span>Some More Text Here</span>
            </div>
            <div>
                <a class="clickable-link" href="#">Clickable Link</a>
            </div>
        </div>
    </div>
    
    <div class="col-sm-4 bg-danger">
        <p>A Completely Separate Section</p>
    </div>
</div>