How to align buttons inside cards with different content

user_18163798 0
Viewed 446

I am still learning CSS and HTML. So please excuse me if this is a silly question. Please see my code below. I need help with aligning the blue buttons on both the cards. It should be on the bottom of the cards (aligned similarly) regardless of content size. Please advise.

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}
<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>Test Example</p>

      <ul>
        <li>test1</li>

        <li>test2</li>

        <li>test3</li>

        <li>test4</li>
      </ul>

      <p>Minor updates.</p>

      <ul>
        <li>test</li>

        <li>Test</li>
      </ul>

      <p><a href=".html" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Go Here</a></p>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <p>test123/p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>

        <p><a href="" class="blue-button" role="button" style=" float: right; margin-bottom: 30px;">Second Test</a></p>
    </div>
  </div>
</div>

flexbox css html
1 Answers

Not a silly question. They seem unaligned because there are more li's on the left side. Buttons are positioned statically by default, so if there is more content, it will be pushed down. You'll notice if you add more li's on the right side, the button will be pushed down and seem aligned. You may find nesting the buttons in their own divs will give you more control.

However, you can easily resolve this with your current structure by adding <br> or the line-break element on the button that is positioned higher. See below.

.row {
  display: flex;
  /* equal height of the children */
}

.col1 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  margin: 0 40px 0 0;
  padding: 0 0 10px 0;
}

.col2 {
  flex: 1;
  /* additionally, equal width */
  border: 1px solid #dadada;
  padding: 0 0 10px 0;
}

.card-header {
  background: rgba(242, 242, 242, 1);
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  padding: 31px 10px 31px 15px;
}

.card-header-bg {
  height: 7px;
}

.card-container {
  padding: 2px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blue-button,
a.blue-button {
  background-color: #026fc2;
  border-radius: 99rem;
  box-shadow: inset 0 0 0 1px #454545;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: center;
  display: inline-block;
}

.btn-primary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px;
}

.card-container>div {
  height: 210px;
}
<div class="row">
  <div class="col1">
    <div class="card-header-bg" style=" background-color: rgba(255, 181, 119, 1);"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <div>
        <p>Test Example</p>

        <ul>
          <li>test1</li>

          <li>test2</li>

          <li>test3</li>

          <li>test4</li>
        </ul>

        <p>Minor updates.</p>

        <ul>
          <li>test</li>

          <li>Test</li>
        </ul>
      </div>
    </div>
    <div class="btn-primary">
      <a href=".html" class="blue-button" role="button">Go Here</a>
    </div>
  </div>

  <div class="col2">
    <div class="card-header-bg" style=" background-color: #7ECEFD;"></div>

    <div class="card-header">Header</div>

    <div class="card-container">
      <div>
        <p>test123</p>

        <ul>
          <li>abc</li>

          <li>def</li>

          <li>ghi</li>
        </ul>

        <p>test test test.</p>

        <ul>
          <li>Learn about testing</li>
        </ul>
      </div>
    </div>
    <div class="btn-primary">
      <a href="" class="blue-button" role="button">Second Test</a>
    </div>
  </div>

Largest rendered height at default ~ makes height for both divs.

user_164963570
Related