I have two equal-height columns and I am trying to get the "Read More" link in each column to sit at the bottom of the column, no matter how much content is in the adjacent column. I am using align-self: flex-end, which I think is supposed to selectively align this single child, but it isn't working. It is also important that the div heights are not stretched in any way. That is why I have specified align-items: flex-start; and align-content: flex-start;.
https://jsfiddle.net/stewx/b2aoksgf/2/
h3,
p {
width: 100%;
border: 1px solid blue;
}
div {
padding: 5px;
}
.outer-container {
display: flex;
border: 1px solid black;
padding: 5px;
}
.column {
border: 1px solid red;
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: 50%;
align-content: flex-start;
}
.more {
border: 1px dashed green;
font-weight: bold;
text-align: right;
align-self: flex-end; /* Has no effect. I would have expected this to move to the bottom. */
}<div class="outer-container">
<div class="column">
<h3>
Foo
</h3>
<p>
The top of this paragraph should be aligned with the top of the paragraph in the other column.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ullamcorper urna. Donec convallis lorem ut semper ultrices. Integer feugiat sodales leo. Sed non lacus sed nisi semper eleifend. Maecenas ultricies condimentum tempor. Fusce vel aliquet
magna, nec sollicitudin nunc. Fusce ut facilisis lorem. Vestibulum porttitor vehicula mi, in bibendum ante ultrices sit amet. Nulla at dui tempor, ornare risus eu, lobortis lorem.
</p>
<p class="more"><a href="#">Read More (I should be at the bottom of this div!)</a></p>
</div>
<div class="column">
<h3>
Bar
</h3>
<p>
The top of this paragraph should be aligned with the top of the paragraph in the other column.</p>
<p>
Vivamus porttitor pharetra eros quis maximus. Sed non blandit justo. Phasellus viverra tellus eu diam tempor pretium. Nam iaculis odio non quam iaculis, sit amet vehicula ipsum scelerisque. Nunc ornare augue quis congue finibus. Curabitur efficitur magna
a fringilla convallis. Nulla nunc mauris, dignissim sit amet arcu sit amet, pellentesque condimentum sapien.
</p>
<p>
Donec tellus purus, sodales non pellentesque a, accumsan ut orci. Vivamus a tincidunt odio, nec fringilla nulla. Nulla eu metus felis. Vivamus dictum accumsan ante pellentesque dapibus. Donec neque orci, congue pretium leo quis, tempor aliquam justo.
Sed elementum cursus mauris vel consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius, ante in fermentum condimentum, lorem urna vulputate justo, nec maximus lectus leo sodales lectus. In nec orci mollis, varius ante
id, faucibus ipsum. Etiam auctor a mi semper egestas. Morbi tincidunt at nunc non semper. Sed mattis tellus ex, in consequat leo facilisis id. Vivamus eleifend pellentesque tempus.
</p>
<p class="more"> <a href="#">Read More</a>
</p>
</div>
</div>
