accordion Accordion code blocks (not SS block) shifting position

I'm using custom code for dropdown content and also for sidebar navigation. When I work within SS everything works great! But the sidebar navigation jumps to the bottom when I look at it live. I've tried added the blocks to a blank page and it did the same thing. I've tried removing the tables that are part of the HTML (not changeable) and that didn't help. I can't figure it out.  https://www.supercubes.com/20-foot-test.

Screenshots and code are below. 

Thanks if you have any ideas!

Note: I started with the SS accordion block. Unfortunately, the site is in 7.0, and I can't duplicate the block. It's on a lot of pages!  😐 

This is the CSS I'm using for both accordions:

.click-reveal {list-style-type: none; display: flex; flex-direction: column; padding: 0; margin: 0rem;}
ul.click-reveal {padding-left: 0!important;}
.click-reveal hr {margin-left: 0; padding-top: .25em;padding-bottom: .25em;}
.content__title {padding: 1rem 0rem 0rem 0rem; position: relative; cursor: pointer; user-select: none; font-size: 20px; font-family: Roboto Slab; font-weight: 700; color: #ff3333; line-height:1rem}
.content__title:before{content: "+"; color: #000;font-weight:700; font-size: 24px; margin-top: 2em!important;}
.check {display: none;}
.content__reveal {display: none; line-height: 1.5rem}
.content__reveal a {color: #ff3333;}
.check:checked ~ .content__reveal {display: block; padding: 1rem; margin-left: .3rem }
.check:checked ~ .content__title:before{content: "-";color: #000;font-weight:700; font-size: 24px; margin-top: 2em!important;}
.content_reveal {color: #ff3333;}

This is the Sidebar html

<ul class="click-reveal">
  <li class="item-container">
    <label class="content">
      <input type="checkbox" class="check">
        <div class="content__title">
          <a href="/shipping-container-sizes-for-sale">&nbsp;Sizes</a></div>

      <div class="content__reveal">
        <a href="/buy-10-foot-containers">10-foot and 45-foot</a><br>
        <a href="/buy-20-foot-containers">20-foot</a><br>
        <a href="/buy-40-foot-containers">40-foot</a><br>
        <a href="/high-cube-shipping-containers">High-cube</a><br>
        <a href="/custom-length">Custom-length</a><br>
      </div>
    </label>
  </li>
<hr>
  <li class="content-container">
    <label class="content">
      <input type="checkbox" class="check">
      <div class="content__title">
        <a href="/types-of-containers">&nbsp;Types</a><br></div>

      <div class="content__reveal">
      <a href="/conventional-containers"><strong>Conventional Containers</strong></a><br>
      <a href="/buy-20-foot-containers">• 20-foot</a><br>
      <a href="/buy-40-foot-containers">• 40-foot</a><br>
      <a href="/40-foot-high-cube">• 40-foot High-cube<br></a><br>

      <strong>Specialty Sizes</strong><br>
      <a href="/buy-10-foot-containers">• 10-foot and 45-foot </a><br>
      <a href="/20-foot-high-cube">• 20-foot High Cube<br></a><br>

      <strong>Specialty Configurations</strong><br>
      <a href="/open-side-container">• Open-side</a><br>
      <a href="/open-top-container">• Open-top</a><br>
      <a href="/hard-top-container">• Hard-top</a><br>
      </div>
    </label>
  </li>
<hr>
  <li class="content-container">
    <label class="content">
      <input type="checkbox" class="check">
      <div class="content__title">
        <a href="/shipping-container-conditions">&nbsp;Conditions</a></div>

      <div class="content__reveal">
      <a href="/wind-and-water-tight-containers">Wind- and Water-tight</a><br>
      <a href="/cargo-worthy-containers">Cargo-worthy</a><br>
      <a href="/one-trip-new-containers">One-trip/’New’</a><br>
      </div>

    </label>
  </li>
</ul>

This is the Content Dropdown html

<ul class="click-reveal">
  <li class="item-container">
    <label class="content">
      <input type="checkbox" class="check">
        <div class="content__title">&nbsp; &nbsp;What are the Dimensions of a 20’?</div>
      <p></p>

<div class="content__reveal">

        <p>Here are the basic specifications for 20’ containers. While there may be some slight variations from container to container, this is a general rule of thumb.</p>

        <h3>20-foot Container Dimensions</h3><br>

		<style type="text/css">
		.tftable {font-size:12px;color:#333333;max-width:800px!important;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;}
		.tftable th {font-size:12px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:center;}
		.tftable tr {background-color:#cdcdcd;}
		.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;}
		.tftable tr:hover {background-color:#ffffff;}
		</style>

		<table class="tftable" border="1">
		<tbody><tr><th>What?</th><th>Length </th><th>Width</th><th>Height</th></tr>
		<tr><td>Exterior Size</td><td>20'</td><td>8'</td><td>8.5'</td></tr>
		<tr><td>Interior Size</td><td>19' 4.5"</td><td>7' 8.5"</td><td>7' 9.75"</td></tr>
		<tr><td>Door Size</td><td>NA</td><td>7' 8.25"</td><td>7' 5.75"</td></tr>
		</tbody></table>
		<div></div>

<h3>20-foot Container Weight (pounds)</h3>
		<style type="text/css">
		.tftable {font-size:12px;color:#333333;max-width:800px!important;border-width: 1px;border-color: #a9a9a9;border-collapse: collapse;}
		.tftable th {font-size:12px;background-color:#b8b8b8;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;text-align:left;}
		.tftable tr {background-color:#cdcdcd;}
		.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #a9a9a9;}
		.tftable tr:hover {background-color:#ffffff;}
		</style><br>

		<table class="tftable" border="1">
		<tbody><tr><th>Max. Gross</th><th>Tare</th><th>Net</th></tr>
		<tr><td>52,190</td><td>5,140</td><td>47,770</td></tr>
		</tbody></table>
		<div></div>

<p><strong>Max. Gross:</strong> The weight of the full container including both the container and the contents<br>
<strong>Tare:</strong> The empty weight of the container<br>
<strong>Net:</strong> The weight capacity (Max. Gross minus Tare)</p>

<h3>Mobility</h3> 
<p>20-foot shipping containers are very portable. They weigh approximately 5,000 pounds. With corner castings and forklift pockets, they are ideal for moving from jobsite to jobsite. They can be moved by most tow companies. See more in Moving & Delivery.</p>

<h3>Questions?</h3> 
<p>If you are not sure what size or condition you are interested in, let us know. We can help you figure out what will meet your needs best. We can help you determine the right size, condition, modifications, paint and other options to ensure you get the right container for you. You can also visit our frequently asked questions page.</p>


  <li class="content-container">
    <label class="content">
      <input type="checkbox" class="check">
      <div class="content__title">&nbsp; &nbsp;What are the uses for a 20’?</div>
      <p></p>


    <div class="content__reveal">
    	<h3>20-foot Containers are Ideal for Many Uses</h3>
<p>20-foot shipping containers are a secure and sensible solution when you need more storage, but don't want it to take up too much space. They can easily hold a car, small boat, jet skis, snowmobiles, etc. Essentially, they are the size of a one-car garage stall. If you are concerned about how a metal box will look near your home or cabin, we can paint your container with custom colors. A used container with a fresh coat of paint can look suitable in a yard or on a lot.</p>

Containers of this size can also be useful for businesses that have temporary, recurring, or long-term storage needs. Some customers use them for outdoor storage and temporarily turn 20-foot containers into record and document storage after a flood or other disaster. You can also easily add a logo or sign to advertise on your container.</p>

If you are exporting your 20-foot container, we can make sure your container is cargo-worthy and surveyed. Cargo-worthy is a specific condition where the container must meet specific structural specifications so that the container can handle the rigors of international shipping. In addition to having the container in cargo-worthy condition, you will need a survey, which is a certificate showing the container is in cargo-worthy condition. We can also handle the survey for you.</p>

If you plan on building with your container, we recommend either the <a href="https://www.supercubes.com/cargo-worthy-containers">cargo-worthy</a> condition with the survey or a <a href="https://www.supercubes.com/one-trip-new-containers">one-trip/”new”</a> container with the survey. The survey is set up for shipping, but it shows that the container is structurally sound which may be helpful with potential permitting and zoning departments.</p>

The url doesn't exist. Can you check it again?

https://www.supercubes.com/20-foot-test

I'm so sorry! I am just seeing your response. I had to give up and deleted that page. It's restored now if you'd still like to look at it. My client would definitely prefer the accordion content, but I couldn't make it work with the accordion navigation on the page. That was more important.

Thanks,
Nancy

Okay. If you still need help this anytime, just comment below, we will check it again

Thank you!