title: How to align my div to the right side of container per element?
body: <p>Hope your all well.</p>
  <p>Is it possible to align my div to the right side within my container? I try using align functions but does not seem to work. is it possible?</p>
  <p>Note, the alignment solution should be for div (chatline) and HTML code only, as i need another div to align (chatline) on the right or left etc. so please don't use CSS alignment on the hold container.</p>
  <p>Any help would be grateful here. thanks Yummi</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>body {
    background-color: #6B6B6B;
    margin: 50px;
    font-family: Arial;
    color: darkgrey;
    font-size: 14px;
    line-height: .3;
    letter-spacing: .5px;
  }
  
  #chattext {
    font-family: Arial;
    color: grey;
    font-size: 12px;
    line-height: 1.1;
    letter-spacing: .5px;
  }
  
  .chatbox {
    position: absolute;
    width: 400px;
    padding: 15px;
    padding-top: 5px;
    border-radius: 0px 0px 30px 30px;
    background-color: rgba(0, 0, 0, .4);
    grid-template-columns: 500px;
    display: grid;
  }
  
  .bubble {
    position: absolute;
    max-width: 200px;
    padding: 15px;
    padding-top: 10px;
    border-radius: 0px 30px 30px 30px;
    background-color: rgba(0, 0, 0, .3);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="chatbox"&gt;
    &lt;div style="height:200px"&gt;
      &lt;p class="bubble" id="chattext"&gt;This should be right &gt; please use htnl code on this div to align&lt;/p&gt;
      &lt;p style="margin-top:70px;" class="bubble" id="chattext"&gt;stay left&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>