title: How can I place a div in <form> at the bottom right corner of modal dialog?
body: <p>I know that this kind of questions already been asked in the site but my situation is different. I am designing a responsive chat application and I want to make the sign up form in a <code>modal dialog</code> that I create using <code>html</code> and <code>css</code> and <code>JS</code>.In the modal content I have a header containing a heading <code>&lt;h1&gt;</code> ,and bellow it a sign up form.</p>
  
  <p>In the form I have two buttons and I want to place them at the bottom right corner of the modal dialog. I tried to position the parent div as relative and then position the child div as absolute with the properties : right:0; bottom:0; but that did not work. Also tried positioning the child div as fixed but then I got it out of the modal being at the bottom right of the window.</p>
  
  <p>HTML:</p>
  
  <pre><code> &lt;!-- The Modal --&gt;
  &lt;div class="modal"&gt;
    &lt;!-- Modal content --&gt;
    &lt;div class="modal-content"&gt;
  
      &lt;form&gt;
        &lt;div class="p-div"&gt;
          &lt;labe&gt;Email:&lt;/labe&gt;
          &lt;input type="text" name="email" required&gt;
  
          &lt;div class="c-div"&gt;
            &lt;button type="button"&gt;Reset&lt;/button&gt;
            &lt;button type="submit"&gt;Sign up&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    /* The Modal (background) */
  .modal {
      display: block; 
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
      background-color: rgb(200, 200, 200);
      margin: 8% auto; 
      border-radius: 1px;
      width: 88.7%; 
      height: 89.3%;
  
  }
  
  .p-div{
    padding: 16px; 
    position: relative;
  }
  
  input{
    display:block;
  }
  
  .c-div{
    position: absolute; 
    right: 0; 
    bottom: 0; 
  }
  </code></pre>
  
  <p>Here's a <a href="https://jsfiddle.net/vnzho4zo/6/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>Any suggestions?</p>
  
  <p>Thanks in advance!</p>