0

.tip-container {
  display: flex;
}

.column {
  flex-direction: column;
}

.tip {
  width: 100%;
  text-align: center;
  border-style: outset;
  min-height: 5em;
}

.tip-title {
  font-weight: bold;
}

.tip-content {
  text-align: left;
  padding: 0 .5em;
}

.tip-unaffordable,
.tip-link {
  line-height: 5em;
}
<div class="tip-container">
  <div class="tip-1 tip">
    <div class="tip-title">Title</div>
    <div class="tip-content">Content</div>
  </div>
  <div class="tip-2 tip">
    <div class="tip-link"><a tabindex="0" id="Link3">Tip<sup>3</sup></a></div>
  </div>
</div>
<div class="tip-container column">
  <div class="tip-1 tip">
    <div class="tip-title">Title</div>
    <div class="tip-content">Content</div>
  </div>
  <div class="tip-2 tip">
    <div class="tip-link"><a tabindex="0" id="Link3">Tip<sup>3</sup></a></div>
  </div>
</div>

https://codepen.io/tietyt/pen/oNjbNVX

enter image description here

The only difference between these 2 containers is that one is using flex-direction of column. How do I make both containers have exactly the same width? Also, why is this happening in the first place? Why don't they automatically line up?

j08691
  • 204,283
  • 31
  • 260
  • 272
Daniel Kaplan
  • 62,768
  • 50
  • 234
  • 356

0 Answers0