title: How to put arrow between two divs using html and css
body: <p>I have to put arrow between two <code>div</code>s. Below is an example image so you can get the proper idea:</p>
  
  <p><a href="https://i.stack.imgur.com/Sl5A8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Sl5A8.png" alt="enter image description here"></a></p>
  
  <p>This is what I have currently:</p>
  
  <pre><code>&lt;style&gt;
          .link{
              font-size: 14px;
              margin-bottom: 10px;
          }
          .link a{
              border: 1px solid #d8d8d8;
              border-radius: 1px;
              color: #222222;
              padding: 0.4rem;
              display: block;
              text-align: center;
              height: 55px;
              line-height: 20px;
          }
          .custom_padding{
              padding-top: 15px !important;
          }
          .panel_custom{
              width: 100%;
              float: left;
              padding: 1rem;
          }
          .custom_a{
              padding: 0 !important;
              text-align: right;
              width: 100%;
              background: #EFEFEF !important;
          }
          .custom_a:hover, .custom_a:active{
              background: #EFEFEF !important;
          }
      &lt;/style&gt;
  
    &lt;div class="row"&gt;
  
          &lt;div class="large-8 columns"&gt;
              &lt;div class="large-12 columns accordion" style="padding: 0;" data-accordion&gt;
                  &lt;div class="panel radius panel_custom accordion-navigation active"&gt;
                      &lt;a href="#Normal" class="custom_a"&gt;Normal Pay Cycle&lt;/a&gt;
                      &lt;div id="Normal" class="panel_custom content active"&gt;
                          &lt;div class="large-3 columns link"&gt;&lt;a href="/timeclock/rapid"&gt;TimeClock Rapid Entry&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-3 columns link"&gt;&lt;a href="/timeclock/all/hoursworked" style="padding: 5px 0 0 0;"&gt;Hours Worked&lt;br&gt;(Approve Hours)&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-3 columns link"&gt;&lt;a href="/employees?Actions=Pay_Employee" class="custom_padding"&gt;Pay Employee&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-3 columns link"&gt;&lt;a href="/processing/taxpayments"&gt;Pay Taxes Owed&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="large-12 columns accordion" style="padding: 0;" data-accordion&gt;
                  &lt;div class="panel radius panel_custom accordion-navigation active"&gt;
                      &lt;a href="#Common" class="custom_a"&gt;Common Report&lt;/a&gt;
                      &lt;div id="Common" class="panel_custom content active"&gt;
                          &lt;div class="large-4 columns link"&gt;&lt;a href="/reports/employertotal" class="custom_padding"&gt;Employer's Tax Total&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-4 columns link"&gt;&lt;a href="/reports/hoursworked" class="custom_padding"&gt;Hours Worked&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-4 columns link"&gt;&lt;a href="/reports/employees" class="custom_padding"&gt;Employee Report&lt;/a&gt;&lt;/div&gt;
  
                          &lt;div class="large-4 columns link"&gt;&lt;a href="/timeclock/all/hoursworked"&gt;TimeClock Hours Worked&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-4 columns link"&gt;&lt;a href="/reports/hoursworked132" class="custom_padding"&gt;Hours Worked 132 Col&lt;/a&gt;&lt;/div&gt;
                          &lt;div class="large-4 columns link"&gt;&lt;a href="/processing/schedulechecks"&gt;Schedule of Checks Printed&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="large-4 columns accordion" data-accordion&gt;
              &lt;div class="panel radius panel_custom accordion-navigation active"&gt;
                  &lt;a href="#Maintain" class="custom_a"&gt;Maintain Employees&lt;/a&gt;
                  &lt;div id="Maintain" class="panel_custom content active"&gt;
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees/newemployee"&gt;Add Employee&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Details" class="custom_padding"&gt;Details&lt;/a&gt;&lt;/div&gt;
  
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Payrate" class="custom_padding"&gt;Payrate&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Note" class="custom_padding"&gt;Note&lt;/a&gt;&lt;/div&gt;
  
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Taxes" class="custom_padding"&gt;Taxes&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Accrual" class="custom_padding"&gt;Accrual&lt;/a&gt;&lt;/div&gt;
  
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Deductions" class="custom_padding"&gt;Deductions&lt;/a&gt;&lt;/div&gt;
                      &lt;div class="large-6 columns link"&gt;&lt;a href="/employees?Actions=Delete" class="custom_padding"&gt;Delete&lt;/a&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Using above HTML code I want to create the below view. This should give a clear idea of what I want.</p>
  
  <p><a href="https://i.stack.imgur.com/UmViB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UmViB.png" alt="enter image description here"></a></p>