pinned answer Buttons to bottom of post

src/App.scss

@@ -66,10 +66,15 @@ h3 {
     white-space: pre-wrap;
   }
 
+  .post-container {
+    margin-right: -5em;
+  }
+
   .post-right {
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
+    min-width: 5em;
 
     .post-date {
       position: relative;
@@ -253,6 +258,8 @@ button {
 }
 
 .nrOfComments {
+  position: relative;
+  right: -3.5em;
   height: 100%;
   display: flex;
   align-self: flex-end;
@@ -261,7 +268,15 @@ button {
   font-size: 1.5em;
   padding: 0.35em;
   * {
-    padding-right: 0.25em;
+    padding-right: 0.3em;
+  }
+  span {
+    padding-right: 0.6em;
+  }
+  button {
+    padding: 0.3em 0.8em;
+    line-height: 2em;
+    font-size: 0.8em;
   }
 }
 
@@ -292,3 +307,7 @@ textarea {
   margin-left: 0.5em;
   width: 25%
 }
+
+.spacer {
+  height: 4em;
+}

src/components/Post.js

@@ -58,11 +58,11 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
                 </div>
                 {recursionDepth !== 0 && <div className="nrOfComments">
                     <FontAwesomeIcon className="icon" icon={faComments}/>
-                    <span className="">{getComments(post, recursionDepth-1)}</span>
+                    <span className="">{getComments(post, recursionDepth - 1)}</span>
+                    <button onClick={() => selectPost(post)}>Antworten</button>
                 </div>}
                 <div className="post-right">
                 <div className="post-date">
-
                     {getDate(post.date)}
                 </div>
                 <div className="row">
@@ -82,7 +82,7 @@ const Post = ({ post, recursionDepth, selectPost, reload }) => {
                         </button>
                     </div>
                 </div>
-                {recursionDepth !== 0 && <button onClick={() => selectPost(post)}>Antworten</button>}
+                {recursionDepth !== 0 && <div className="spacer"></div>}
             </div>
         </div>
         <div className="comment">