title: How to make inner div position at top left corner
body: <p>I have a main div in which i have created a small div and now trying to position at top left corner but it is not working. Actually i have a requirement that if a text is small, then place it in vertically centre. But if a text grow then move it on top until it reach a height of a main div and then wrap it. 
  Can someone give me hint how to make this small block(tick mark div) in top left only so it will not change its position either text is big or short.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main-box{
      border: 1px solid #adb8c0;
      height: 80px;
      width: 119px;
      color: #026890;
  }
  .small-box {
      float: left;
      width: 16px;
      height: 16px;
      font-size: 16px;
      border: 1px solid rgba(0, 0, 0, .2);
      position:  relative;
      color: lightgrey;
      text-align: center;
      font-weight: bold;
  }
  
  .flag-label{
      font-size: 13px;
      font-weight: 500;
      line-height: 15px;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      overflow: hidden;
      color: #026890;
      text-align: center;
  }
  
  
  div.horizontal {
      display: flex;
      justify-content: center;
      background-color: #cff;
   /*   width: 100px;
      height: 60px;*/
  }
  div.vertical {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color:black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row ng-scope" style="padding-left:17px;" &gt;
    &lt;div class="col-xs-3 horizontal main-box ng-scope" &gt;
    &lt;div class="small-box"&gt;✓&lt;/div&gt;
    &lt;div class="vertical"&gt;
      &lt;span class="flag-label ng-binding"&gt; this is a correct position&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;div class="col-xs-3 horizontal main-box ng-scope"&gt;
    &lt;div class="small-box" &gt;✓&lt;/div&gt;
    &lt;div class="vertical"&gt;
      &lt;span class="flag-label ng-binding"&gt;one&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt; 
  
  &lt;div class="col-xs-3 horizontal main-box ng-scope" &gt;
    &lt;div class="small-box"&gt;✓&lt;/div&gt;
    &lt;div class="vertical"&gt;
      &lt;span class="flag-label ng-binding"&gt;one two&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
  
  &lt;div class="col-xs-3 horizontal main-box ng-scope" &gt;
    &lt;div class="small-box"&gt;✓&lt;/div&gt;
    &lt;div class="vertical"&gt;
      &lt;span class="flag-label ng-binding"&gt;one two three four fiv six&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>PS: i am using row etc because these block are showing in a row actually in my code(3 block item per row)</p>