title: How to avoid overlapping of html elements over each other?
body: <p>I'm facing a problem creating something. I want a number of            <code>&lt;kbd&gt;</code> tag in my body which should be aligned right. I'm able to do so but the problem is that <code>&lt;kbd&gt;</code> elements are overlapping over each other. So I want to know that how can I keep the <code>&lt;kbd&gt;</code> elements right aligned and avoid their overlapping.</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>.me_msg {
    background: rgb(250, 250, 250);
    border-radius: 10px 10px 0px 10px;
    border-width: 1px;
    color: #003cff;
    padding: 10px;
    text-align: right;
    padding: 1.1% 4% 1.1% 4%;
    position: absolute;
    right: 03%;
    top: auto;
    bottom: auto;
    min-width: 20%;
    max-width: 40%;
    box-shadow: 0px 0px 3px #e9e9e9;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;kbd class='me_msg'&gt;My First Message&lt;/kbd&gt;
  &lt;kbd class='me_msg'&gt;My Second Message&lt;/kbd&gt;
  &lt;kbd class='me_msg'&gt;My Third Message&lt;/kbd&gt;</code></pre>
  </div>
  </div>
  </p>