JSFiddle - React, Tailwind, and code Playground

by stewx

HTML

<div class="outer-container">
  <div class="column">
    <h3>
  Foo
  </h3>
    <p>
      This 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>
      This 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...

CSS

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. */
}