title: Make below design without pre tag
body: <p>In <code>&lt;pre&gt;</code> is easy to make that figure but i want to make this pattern via <code>&lt;div&gt;</code></p>
  
  <p>Is possible ? With margin ? </p>
  
  <p>I try with margin and its successfully done but some pattern cant make via this techniques.</p>
  
  <p>Successfully Done :- </p>
  
  <pre><code>*********
  **** ****
  ***   ***
  **     **
  *       *
  *       *
  **     **
  ***   ***
  **** ****
  *********
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div class="pattern"&gt;
      &lt;div class="space"&gt;
          *********&lt;br&gt;
          ****&lt;span style="margin-left: 11%;"&gt;&lt;/span&gt;****&lt;br&gt;
          ***&lt;span style="margin-left: 33%;"&gt;&lt;/span&gt;***&lt;br&gt;
          **&lt;span style="margin-left: 55%;"&gt;&lt;/span&gt;**&lt;br&gt;
          *&lt;span style="margin-left: 77%;"&gt;&lt;/span&gt;*&lt;br&gt;
          *&lt;span style="margin-left: 77%;"&gt;&lt;/span&gt;*&lt;br&gt;
          **&lt;span style="margin-left: 55%;"&gt;&lt;/span&gt;**&lt;br&gt;
          ***&lt;span style="margin-left: 33%;"&gt;&lt;/span&gt;***&lt;br&gt;
          ****&lt;span style="margin-left: 11%;"&gt;&lt;/span&gt;****&lt;br&gt;
          *********
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong> </p>
  
  <pre><code>.pattern {
      letter-spacing: 10px;
      margin: 10px;
      display: flex;
      font-weight: 700;
      font-size: 100%;
  }
  </code></pre>
  
  <p>Want to Implement</p>
  
  <pre><code>    *
     * *
    *   *
   *     *
  *       *
   *     *
    *   *
     * *
      *
  </code></pre>
  
  <p><strong>Snippet</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pattern {
    letter-spacing: 10px;
    margin: 10px;
    display: flex;
    font-weight: 700;
    font-size: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pattern"&gt;
    &lt;div class="space"&gt;
      *********&lt;br&gt;
      ****&lt;span style="margin-left: 11%;"&gt;&lt;/span&gt;****&lt;br&gt;
      ***&lt;span style="margin-left: 33%;"&gt;&lt;/span&gt;***&lt;br&gt;
      **&lt;span style="margin-left: 55%;"&gt;&lt;/span&gt;**&lt;br&gt;
      *&lt;span style="margin-left: 77%;"&gt;&lt;/span&gt;*&lt;br&gt;
      *&lt;span style="margin-left: 77%;"&gt;&lt;/span&gt;*&lt;br&gt;
      **&lt;span style="margin-left: 55%;"&gt;&lt;/span&gt;**&lt;br&gt;
      ***&lt;span style="margin-left: 33%;"&gt;&lt;/span&gt;***&lt;br&gt;
      ****&lt;span style="margin-left: 11%;"&gt;&lt;/span&gt;****&lt;br&gt;
      *********
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>