Help me align my accordion with my tabs box ?

[RobMoore007]

I have a tabs section on my product page and I wish to align my accordion to the right of the tabs and inline? Please can you adviseHere is a screen grab of my product page with tabs and accordion shown

Also, when you press a tab and the content opens, the accordion moves down?

Please help. Thanks

[Danishecom]

send me url so so i can look into your store. unable to give solution by looking only at still image.ty

[RobMoore007]

Hi, This is a development store

</section>
<section class="section is-width-{{ width }} {{ css_class }}">
   <!--Start CSS For Tabs-->
        
<style>
    ul.tabs  {
    display: block
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 510;
    padding-top: 0px;
	padding-bottom: 0px;
    align-items: left;
    background: lightgrey; /* CHANGE THE COLOUR HERE */
	border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

  .twelve {
  border-color: #71823c;
  border-style: solid;
  border-width: 1px;
  border-bottom-width: 2px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  }

  li.tabs {
  cursor: pointer;
  }

  ul.tabs-content {
  font-family: sans-serif;
  align-items: left;
  justify-content: top;
  margin-bottom: 1px;
  padding: 2.2em 2.2em;
  vertical-align: top;  
  padding-top: 0em;

}
  
  .accordion {
    position: relative;
	left: 1000px;
  	top: -145px;
}

</style>
<div class="row">
<div class="twelve columns alpha">
<ul class="tabs">{% if product.metafields.overview.info != blank %}
<li><a class="tabs active" href="#tab1">Overview</a></li>
{% endif %}
{% if product.metafields.features.detail != blank %}
<li><a{% if product.metafields.overview.info == blank %} class="active"{% endif %} href="#tab2">Features</a></li>
{% endif %}
{% if product.metafields.size.guide != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail == blank %} class="active"{% endif %} href="#tab3">Size Guide</a></li>
{% endif %}
{% if product.metafields.custom.fit != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit == blank %} class="active"{% endif %} href="#tab4">Custom Fit</a></li>
{% endif %}
{% if product.metafields.techi.info != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info == blank %} class="active"{% endif %} href="#tab5">Tech Info</a></li>
{% endif %}
{% if product.metafields.terms.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text == blank %} class="active"{% endif %} href="#tab6">T&Cs</a></li>
{% endif %}
{% if product.metafields.specifications.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text == blank %} class="active"{% endif %} href="#tab7">Specifications</a></li>
{% endif %}
{% if product.metafields.lithium.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text == blank %} class="active"{% endif %} href="#tab8">Lithium</a></li>
{% endif %}
{% if product.metafields.charging.advice != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice == blank %} class="active"{% endif %} href="#tab9">Charging Advice</a></li>
{% endif %}
{% if product.metafields.warranty.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text == blank %} class="active"{% endif %} href="#tab10">Warranty</a></li>
{% endif %}
{% if product.metafields.washing.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text == blank %} class="active"{% endif %} href="#tab11">Washing</a></li>
{% endif %}
{% if product.metafields.returns.policy != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy == blank %} class="active"{% endif %} href="#tab12">Returns</a></li>
{% endif %}
{% if product.metafields.goretex.info != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info  == blank %} class="active"{% endif %} href="#tab13">Gore Tex Info</a></li>
{% endif %}
{% if product.metafields.interface1.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text  == blank %} class="active"{% endif %} href="#tab14">Interface-1</a></li>
{% endif %}
{% if product.metafields.video.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text  == blank %} class="active"{% endif %} href="#tab15">Video</a></li>
{% endif %}
{% if product.metafields.Personalisation.text != blank %}
<li><a{% if product.metafields.overview.info == blank and product.metafields.features.detail and product.metafields.custom.fit and product.metafields.techi.info and product.metafields.terms.text and product.metafields.specifications.text and product.metafields.lithium.text and product.metafields.charging.advice and product.metafields.warranty.text and product.metafields.washing.text and product.metafields.returns.policy and product.metafields.goretex.info and product.metafields.interface1.text and product.metafields.video.text and product.metafields.Personalisation.text  == blank %} class="active"{% endif %} href="#tab16">Personalisation</a></li>
{% endif %}</ul>

<!--Start tab content-->
<ul class="tabs-content">{% if product.metafields.overview.info !=blank %}
<li class="tab1 active">{{product.metafields.overview.info}}
{% endif %} 
{% if product.metafields.features.detail !=blank %}
<li class="tab2">{{product.metafields.features.detail}}</li>
{% endif %} 
{% if product.metafields.size.guide !=blank %}
<li id="tab3">{{product.metafields.size.guide}}</li>
{% endif %}
{% if product.metafields.custom.fit !=blank %}
<li id="tab4">{{product.metafields.custom.fit}}</li>
{% endif %}
{% if product.metafields.techi.info !=blank %}
<li id="tab5">{{product.metafields.techi.info}}</li>
{% endif %}
{% if product.metafields.terms.text !=blank %}
<li id="tab6">{{product.metafields.terms.text}}</li>
{% endif %}
{% if product.metafields.specifications.text !=blank %}
<li id="tab7">{{product.metafields.specifications.text}}</li>
{% endif %}
{% if product.metafields.lithium.text !=blank %}
<li id="tab8">{{product.metafields.lithium.text}}</li>
{% endif %}
{% if product.metafields.charging.advice !=blank %}
<li id="tab9">{{product.metafields.charging.advice}}</li>
{% endif %}
{% if product.metafields.warranty.text !=blank %}
<li id="tab10">{{product.metafields.warranty.text}}</li>
{% endif %}
{% if product.metafields.washing.text !=blank %}
<li id="tab11">{{product.metafields.washing.text}}</li>
{% endif %}
{% if product.metafields.returns.policy !=blank %}
<li id="tab12">{{product.metafields.returns.policyt}}</li>
{% endif %}
{% if product.metafields.goretex.info !=blank %}
<li id="tab13">{{product.metafields.goretex.info}}</li>
{% endif %}
{% if product.metafields.interface1.text !=blank %}
<li id="tab14">{{product.metafields.interface1.text}}</li>
{% endif %}
{% if product.metafields.video.text !=blank %}
<li id="tab15">{{product.metafields.video.text}}</li>
{% endif %}
{% if product.metafields.Personalisation.text !=blank %}
<li id="tab16">{{product.metafields.personalisation.text}}</li>
{% endif %}</ul></div>
<div class="four columns omega">
</section>
    
  <!--Start Accordion-->
<div>
  </section>
<section class="section is-width-{{ width }} {{ css_class }}">
<div class="four columns alpha">
  <dl class="accordion">
 <dt><a href="#"><small class="right">&#9668;</small>Description</a></dt>
 <dd>Some description text in here.</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Sizing &amp; Fit</a></dt>
 <dd>Sizing: 1=XS, 2=S, 3=M, 4=L</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Care &amp; Maintenance</a></dt>
 <dd>Dry Clean only.</dd>

 <dt><a href="#"><small class="right">&#9668;</small>Shipping Information</a></dt>
 <dd>Free International Shipping</dd>
</dl></div>
<div class="twelve columns omega">
</section>

 - here is the section from my product_main.liquid file .. Is this any use