Improve blog post headers with flexbox

css/main.css

@@ -148,6 +148,8 @@ blockquote p {
   .column.third { width: 33.3%; }
   .column.fourth { width: 25%; }
   .column.three-fourths { width: 75%; }
+  .column.fifth { width: 20%; }
+  .column.four-fifths { width: 80%; }
   .column.flow-opposite { float: right; }  
 }
 
@@ -244,18 +246,18 @@ div.header a {
 }
 
 span.timestamp {
+  display: block;
   font-size: 0.85rem;
-  margin-top: 7px;
-}
-
-@media (min-width: 40rem) {
-  span.timestamp {
-    float: right;
-  }
+  margin-top: 8px;
 }
 
 .post-header {
-  padding-bottom: 10px;
+  padding-bottom: 24px;
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  column-gap: 12px;
+  flex-wrap: wrap;
 }
 
 a.read-more {