title: Aligning text towards the bottom inside a square in a div in css
body: <p>I have a screen-shot as shown below in which I was able to make the square and text in <a href="https://jsfiddle.net/nepgqcjL/3/embedded/result/" rel="nofollow noreferrer">fiddle</a>. </p>
  
  <p><a href="https://i.stack.imgur.com/LIYma.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LIYma.png" alt="enter image description here"></a> </p>
  
  <p><br><br> 
  The CSS codes which I have used in order to make the squares are: </p>
  
  <pre><code>.squares 
  {
  display: flex;
  justify-content: space-between;
  align-items:center;
  padding: 1rem;
  background-color: rgb(238, 238, 238);
  flex-wrap: wrap;
  vertical-align: bottom;
  }
  
  .squares .square 
  {
  width: 200px;
  text-align: center;
  height: 200px;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  border-radius: 10px;
  background-color: rgb(255, 255, 255);
  }
  </code></pre>
  
  <p><br><br>
  <strong>Problem Statement:</strong> </p>
  
  <p>I am wondering what CSS codes I need to add in the fiddle and in the above mentioned code so that <strong>text comes at the bottom in every square</strong>. </p>
  
  <p>I tried with <code>display: inline-block; align-self: flex-end;</code> but somehow it didn't work. </p>