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

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 >
    <div >
        <div >
            <!-- DIV #1 -->
            <div >
                <div>
                    <span><i ></i></span>
                    <span>Some Text Here</span>
                </div>
                <div>
                    <a  href="#">Clickable Link</a>
                </div>
            </div>
            
            <!-- DIV #2 -->
            <div>
                <div>
                    <span><i ></i></span>
                    <span>Some More Text Here</span>
                </div>
                <div>
                    <a  href="#">Clickable Link</a>
                </div>
            </div>
        </div>
        
        <div >
            <p>A Completely Separate Section</p>
        </div>
    </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <div >
        <div >
          <div>
            <span><i ></i></span>
            <span >Some Text Here</span>
          </div>

          <div>
            <a  href="#">Clickable Link</a>
          </div>
        </div>

        <div >
          <div>
            <span><i ></i></span>
            <spann >Some More Text Here</span>
          </div>

          <div>
            <a  href="#">Clickable Link</a>
          </div>
        </div>
      </div>
    </div>

    <div >
      <p>A Completely Separate Section</p>
    </div>
  </div>
</div>

CodePudding user response：

you can try this and cheng it in your local

<div >
<div >
    <div >
        <!-- DIV #1 -->
        <div >
            <div>
                <span><i ></i></span>
                <span>Some Text Here</span>
            </div>
            <div>
                <a  href="#">Clickable Link</a>
            </div>
        </div>
        
        <!-- DIV #2 -->
        <div>
            <div>
                <span><i ></i></span>
                <span>Some More Text Here</span>
            </div>
            <div>
                <a  href="#">Clickable Link</a>
            </div>
        </div>
    </div>
    
    <div >
        <p>A Completely Separate Section</p>
    </div>
</div>