How to align an element with flex columns?

Question

I have a flexbox layout that should display content in one column for mobile device, on two for a laptop and on three for a PC. It works but I have an a tag on the bottom of my first column and I can't align it with the other two columns. I tried adding margin-top, margin-bottom and padding-top, padding-bottom properties but nothing seems to move it. How can I position the a tag on the same line as the other two columns?

.container {
  width: 100%;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.col-lg-4,
.col-lg-8,
.col-sm-6 {
  position: relative;
  width: 100%;
}

@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 1024px) {
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
}

.box {
  margin: 10px;
  padding: 10px;
}

.view-details-a {
  text-decoration: none;
  margin-left: 32px;
  margin-bottom: 100px;
  font-size: 24px;
  font-family: Open Sans;
  font-size: 24px;
  color: #408BEA;
}

.sync-and-share-p {
  margin-left: 16px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  color: rgba(36, 49, 67, 0.6);
}

.first-box-h1 {
  margin-left: 16px;
  top: 96px;
  font-family: Open Sans;
  font-size: 24px;
  color: #00204D;
}

.just-updated-p {
  margin-left: 16px;
  top: 168px;
  font-family: Open Sans;
  font-size: 16px;
  color: #9BC225;
}

.first-box-text {
  margin-left: 16px;
  top: 216px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  color: #00204D;
}

h4 {
  margin-left: 16px;
  top: 440px;
  font-family: Open Sans;
  font-size: 16px;
  color: #00204D;
}

p {
  margin-left: 16px;
  top: 472px;
  font-family: Open Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  color: rgba(36, 49, 67, 0.9)
}

img {
  margin-left: 16px;
}

<div class="container">
  <div class="grid">
    <div class="col-lg-4">
      <div class="box">
        <p class="sync-and-share-p">Heading </p>
        <h1 class="first-box-h1">H1 Heading</h1>
        <p class="just-updated-p">Something else</p>
        <p class="first-box-text">lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
      </div>

    </div>

    <div class="col-lg-8">
      <div class="grid">
        <div class="col-sm-6">
          <div class="box">
            <img src="assets/images/first_image.PNG" alt="file share icon">
            <h4>H4</h4>
            <p>lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum lorem ipsum lorem ipsumlorem
            </p>
          </div>

          <div class="box">
            <img src="assets/images/second_image.PNG" alt="share icon">
            <h4>Heading</h4>
            <p>Alorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
          </div>

          <div class="box">
            <img src="assets/images/third_image.PNG" alt="alert icon">
            <h4>Heading</h4>
            <p>lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
            </p>
          </div>

        </div>
        <div class="col-sm-6">

          <div class="box">
            <img src="assets/images/fourth_Image.PNG" alt="file backup icon">
            <h4>THeading</h4>
            <p>lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
          </div>

          <div class="box">
            <img src="assets/images/fifth_image.PNG" alt="vm icon">
            <h4>Heading </h4>
            <p>lorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
          </div>

          <div class="box">
            <img src="assets/images/sixth_image.PNG" alt="restore icon">
            <h4>Heading</h4>
            <p>Rlorem ipsum lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a class="view-details-a" href="#">More info &rarr;</a>

</div>

And here is a link to a codepen for better visualization:

https://codepen.io/Radmon/pen/eYJzzXw

*"How can I position the `a` tag on the same line as the other two columns?*" Where exactly do you want the anchor tag? Aligned with the 2nd column, the 3rd column or something else? — Michael Benjamin, Jun 13 '20 at 15:07
I want to position it on the bottom of the first column as it is now, but aligned with the other two columns. — Mahma Deva, Jun 13 '20 at 15:27
Aligned how? Vertical, horizontally? The other columns have different content heights. You mean at the bottom of the full column? — Michael Benjamin, Jun 13 '20 at 15:29
https://codepen.io/678789asdflu/pen/WNrxoQv … consider altering your HTML — Michael Benjamin, Jun 13 '20 at 15:33
Yes, at the bottom of the full column. I am considering it indeed, but I don't really know what and how to alter. — Mahma Deva, Jun 13 '20 at 15:43

score 0 · Answer 1 · answered Jun 13 '20 at 15:50

A simple solution is to have the anchor element shift upward a distance equal to its own height.

No changes necessary to the HTML.

Apply this change to the desktop view only.

Add this to your code:

.view-details-a {
    position: absolute;
    transform: translateY(-100%);
}

revised codepen

Here's how transform and translate work:

Element will not stay centered, especially when re-sizing screen

How to align an element with flex columns?

1 Answers1