CSS: Getting SVG plus symbol to appear to the right of tab, not the right of the containing div-CodePudding

So I've got a problem where I've got two tabs (https://codepen.io/databell/pen/LYjxvyx) where the first tab opens up content and the second opens up a modal.

Now to be clear, those functions work. That's not the issue. So for those purposes, I deleted those out of my example. Focusing on CSS here.

My problem is I want plus symbols to appear to the right side of each tab (really a div) and instead one tab has the symbol to the far right of the container, even though the tab is set to width 100%. So I'm stumped as to what the problem is.

This is meant to go into a Shopify store using the Dawn theme, so I'm using their elements here to create this interface.

Here's the code.

<div id="info-additions" class="product__accordion accordion info-additions-content" >
          <details>
            <summary>
              <div class="summary__title info-additions-tab g-flex">
                <h2 class="h4 accordion__title t-body benefits">
                  Tab One
                  <span></span>
                </h2>
              </div>
              <div class="summary__title info-additions-tab g-flex">
              <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-ingr">
              <button id="ProductPopup-ingr" class="summary__title t-body ingredients" type="button" aria-haspopup="dialog" data-additions-tab="ingredients"> 
                <h2 class="h4 accordion__title">
                  Tab Two
                  <span></span>
                </h2>
              </button>
              </modal-opener>
              </div>
            </summary>
            <div class="accordion__content rte">
              <p>Content</p>
            </div>
          </details>
        </div>

CSS:

body {
    font-size: 1.6rem;
}
*, ::before, ::after {
    box-sizing: inherit;
}
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
    letter-spacing: .06rem;
    line-height: 1.3;
}
.h4, h4 {
   font-size: 1.6rem;
}
.grid {
    list-style: none;
}
.g-flex {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
.accordion summary {
    cursor: pointer;
    display: flex;
    position: relative;
    list-style: none;
    line-height: 1;
    padding: 1.5rem 0;
}
.accordion__title {
    display: inline-block;
    max-width: calc(100% - 6rem);
    min-height: 1.6rem;
    margin: 0;
    word-break: break-word;
}
details > * {
    box-sizing: border-box;
}
.accordion__title {
    word-break: break-word;
}
.accordion .summary__title {
    display: flex;
    flex: 1;
}
#info-additions {
    clear: both;
    height: auto;
    margin: 15px 0 0;
    border-top: 2px solid;
    border-bottom: 2px solid;
    width: 100%;
}
.info-additions-content {
    position: relative;
    height: 0;
    transition: .6s var(--a-cubic-1);
}
.info-additions-tab {
    justify-content: space-between;
}
.info-additions-tab span {
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 13px;
    right: 2rem;
}
.info-additions-tab button {
    position: relative;
    padding: 16px 0!important;
    line-height: 1;
    font-weight: 500;
    text-align: left;
}
.info-additions-tab button.benefits {
    width: 50%;
}
.info-additions-tab .product-popup-modal__opener {
    width: 100% !important;
}
.info-additions-tab button.ingredients {
    width: 100%;
}
.info-additions-tab span {
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 13px;
    right: 2rem;
 }
.info-additions-tab span:before,
.info-additions-tab span:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(90deg);
    transform: translate(-50%, -50%) rotate(90deg);
    width: 2px;
    height: 18px;
    background-color: black;
    transition: 0.3s;
}
.info-additions-tab button:not(.active) span:after {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
}
.info-additions-content {
    position: relative;
    height: 0;
    transition: 0.6s var(--a-cubic-1);
}
.info-additions-content [data-additions-content] {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 5px 0 20px;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s 0s;
}
.info-additions-content [data-additions-content].active {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.4s;
}
#info-additions button {
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    transition: 0.2s;
}

CodePudding user response：

if you want an absolute element like to stay in the parent element you have to set the position of the parent to "relative". you have two problems. summary__title doesn't have a position so doesn't stay in it . for the second tab, your modal button has a relative position that makes the stay inside of it instead of the summary__title.

.accordion .summary__title {
  ...
  position: relative; // add position
}
#info-additions button {
  ...
  position: unset; // unset the position of the button
}