title: Adjust the width of an absolute positioned element, based on the content inside
body: <p>I have a div(<code>container-right)</code> that is absolute positioned to the right;</p>
  
  <p>Inside I have a toggle(show-hide) using a checkbox; Click on text - Tomandji.</p>
  
  <p>The toggle shows a div(<code>content</code>), below the <code>container-right</code> and <code>container</code>. </p>
  
  <p>I need the absolute positioned div(<code>content</code>), width to adjust based on the content inside; I need this because the content is dynamic.</p>
  
  <p>In the example I have a list.</p>
  
  <p>I want the <code>ul/li</code> to be horizontal and go below container(red) as necessary.</p>
  
  <p>I don't want the <code>content</code> to get all the width of the <code>container</code>(red), but just adjust based on elements inside from right to left;</p>
  
  <p>So, to have First Second Third inline.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.toggle .trigger {
    cursor: pointer; }
  
  .toggle input[type='checkbox'].trigger {
    display: none; }
  
  .toggle .content {
    display: none; }
  
  .toggle .trigger:checked ~ .content {
    display: block; }
  
  .container { 
    height:120px;
    position: relative;
    background-color:red;
  }
  
  .container-right {
    background: #0069aa;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0; }
    
    .container-right .toggle {
      padding: 0 1rem;
      position: relative;
      text-align: center;
      top: 50%;
      transform: translateY(-50%); 
   }
      .container-right .toggle .trigger {
        color: #fff;}
  
        .container-right .toggle .trigger * {
          display: block; }
          
        .container-right .toggle .trigger::after {
          content: "a";
      }
        .container-right .toggle .trigger:checked ~ label {
          color: #4FA738; }
          
        .container-right .toggle .trigger:checked::after {
          content: "x"; }
          
      .container-right .toggle .content {
        background: #0069aa;
        position: absolute;
        right: 0;
        display:none;
        top: 71.5px; }
        
        .container-right .toggle .content ul li {
          display: inline-block; }
          
          ul {
          padding:0
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="container-right"&gt;
          &lt;div class="toggle"&gt;
              &lt;input type="checkbox" id="menu-toggle"  class="trigger"/&gt;
              &lt;label for="menu-toggle" class="trigger"&gt;
                  &lt;span&gt;Tomandji&lt;/span&gt;
              &lt;/label&gt;
      &lt;div class="content"&gt;
      &lt;ul&gt;
          &lt;li class="c-list__item"&gt;&lt;a href="#"&gt;First link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="c-list__item"&gt;&lt;a href="#"&gt;Second link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="c-list__item"&gt;&lt;a href="#"&gt;Third link&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>