title: Placing a div below another (using flexbox)
body: <p>I am trying to place the <code>timeAgo</code> i.e. <code>22 seconds ago</code> content just below the <code>info</code> content. But, for the styling I am using, <code>timeAgo</code> is being pushed towards right.
  <br>
  Here is my markup - </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    
    overflow:auto;
    
   }
   .post {
    height:120px;
    width:700px;
    margin:120px auto;
    background-color:#EFEFEF;
    border:1px solid #79CEF4;
    display:flex;
    justify-content:flex-start;  
   }
   
   
   .photo {
    width:80px;
    height:80px;
    background-color:#99E058;
    margin:10px 10px 10px 20px;
    align-self:center;
    
   }
   
   .info {
    
    margin: 25px 10px 10px 20px;
    align-self:center;
    
   }
   
   .timeAgo {
    margin: 80px 10px 10px 20px;
    font-size:11px;
    
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
       &lt;div class="post"&gt;
          
          &lt;div class="photo"&gt;&lt;/div&gt;
          &lt;div class="info"&gt;&lt;p&gt;This is just a plain simple message!&lt;/p&gt;&lt;/div&gt;
          &lt;div class="timeAgo"&gt;22 seconds ago&lt;/div&gt;
      
       &lt;/div&gt;
      
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>