title: Realign buttons
body: <h1>JavaScript</h1>
  
  <pre><code>$(function(){
    $('.select-another-button').each(function(){
      $(this).bind('click', function(e) {
        $(this).attr('disabled','true'); //disables the button
        $('#overlay').show(); //after disabling show the overlay for hover
        setTimeout(function(){ 
          $(this).attr('disabled','false'); //enables after 5mins
          $('#overlay').hide(); //hide the overlay
        }, 300000);
        e.preventDefault();
        fileBrowser(this);
        return false;
      });
    });
  });
  
  $("#overlay").hover(function(){
      $('#message').show();
  },function(){
      $('#message').hide();
  });
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="card-title"&gt;
      &lt;div class="title-actions"&gt;
  
  
          &lt;a href="#" id="id_select_request_document" title="Select file(s)" class="btn btn-icon select-button"
                  data-turbolinks="false" data-save-label="Ok" data-close-label="Cancel" data-copy-to="9"
                  data-reload="true" data-url="/documents/select/8/"&gt;
              &lt;i class="material-icons"&gt;folder&lt;/i&gt;
          &lt;/a&gt;
  
  
          &lt;a href="#" id="id_upload_request_document" title="Upload file(s)" class="btn btn-icon upload-button"
                  data-turbolinks="false" data-url="/documents/upload/9/"
                  data-complete-post="/requests/validate-requirements/2/" data-max-uploader-connections="1"
                  style="position: relative; overflow: visible; direction: ltr;"&gt;
              &lt;i class="material-icons"&gt;cloud_upload&lt;/i&gt;
              &lt;i style="overflow: hidden;display: block;position: absolute;top: 0;left: 0;width: 35px;height: 35px;"&gt;&lt;input
                          multiple="multiple" type="file" name="file"
                          style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;div class="wrapper"&gt;
              &lt;div id="overlay"&gt;&lt;/div&gt;
              &lt;a href="#" title="Send email - rejected file(s)" class="btn btn-icon select-another-button"
                      data-url="/messaging/send/2/"&gt;
                  &lt;i class="material-icons"&gt;assignment_late&lt;/i&gt;
                  &lt;div class="alert alert-success" id="send-message" style="display: none;"&gt;
                      &lt;p&gt;
                          The message was sent to the client. Please wait 5 minutes &lt;br&gt; before sending the message again.
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  
  
          &lt;a href="/admin/filer/folder/9/list/" class="btn-icon"&gt;&lt;i class="material-icons"&gt;settings&lt;/i&gt;&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;h5&gt;Request documents&lt;/h5&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1> CSS </h1>
  
  <pre><code>.title-actions {
      float: right;
      height: 50px;
      margin-top: 13px;
  }
  
  .title-actions a {
      transition: background 0.3s ease;
  }
  
  .title-actions a.btn {
      padding: 2px 14px;
      line-height: 26px;
      max-height: 28px;
      position: relative;
      top: -1px;
      margin-left: 8px;
  }
  
  .title-actions a:hover {
      background: #4382B5;
  }
  
  .title-actions span {
      color: #444;
      background: #E6E6E6;
      padding: 6px 10px;
      border-radius: 3px;
      float: none;
      position: relative;
      margin-left: 6px;
  }
  
  .title-actions .btn {
      padding: 2px 14px;
      line-height: 26px;
      max-height: 28px;
      position: relative;
      top: -1px;
      margin-left: 8px;
  }
  
  .title-actions .btn-icon {
      background: transparent;
      position: relative;
      color: #3E5366;
      text-align: center;
      display: inline-block;
      padding: 0 !important;
      transition: color 0.3s ease;
      box-shadow: none !important;
      margin-top: -16px;
      margin-left: 6px;
  }
  
  .title-actions .btn-icon i {
      font-size: 35px;
      line-height: 20px;
      position: relative;
      top: 12px;
  }
  
  .title-actions .btn-icon:hover {
      color: #4382B5;
      background: transparent;
  }
  
  .title-actions .badge .material-icons {
      font-size: 1.2em;
      line-height: 0;
      position: relative;
      top: 4px;
  }
  </code></pre>
  
  <p>In the html block, I added the </p>
  
  <pre><code>&lt;div class="wrapper"&gt;
              &lt;div id="overlay"&gt;&lt;/div&gt;
              &lt;a href="#"
                 title="{% trans "Send email - rejected file(s)" %}"
                 class="btn btn-icon select-another-button"
                 data-url="{% url "messaging:send" request_id=object.pk %}"&gt;
                  &lt;i class="material-icons"&gt;assignment_late&lt;/i&gt;
                  &lt;div class='alert alert-success' id='send-message' style="display: none;"&gt;
                      &lt;p&gt;
                      The message was sent to the client. Please wait 5 minutes &lt;br&gt; before sending the message again.
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>In fact, I didn't add everything. I just did add the first two div tags, and I got a little issue with the different button from this code. It changed the old line of <a href="https://i.stack.imgur.com/3iEXC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3iEXC.png" alt="buttons"></a> to the new line of <a href="https://i.stack.imgur.com/aeem9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aeem9.png" alt="enter image description here"></a>, but I don't even know how to fix it. How could I modify my code to bring back two the old line of buttons? I think I could style with css, but I can't say how because I don't have a lot of experience with it.</p>