title: New to CSS and coding. Organizing radio buttons and divs for a beginner gallery
body: <p>So the issue I can't seem to solve is how to move the obscured divs under the radio+label buttons.</p>
  
  <p><a href="https://pastebin.com/ya4FerSF" rel="nofollow noreferrer" title="My HTML">My Html</a></p>
  
  <p><a href="https://pastebin.com/yErYZa0w" rel="nofollow noreferrer" title="My CSS">My CSS</a>
  <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>    /*color palette: abls
      [lightest to darkest]
      #eeeeee
      #eaffc4
      #b6c399
      #6a856a
      #333333
      */
      
      body {
        background-color: #333333;
        font-family: monospace;
        display: flex;
        justify-content: center;
      }
      
      div {
        /*background-color: red;*/
        width: 100%;
        height: 100%;
        justify-content: center;
      }
      
      /*aesthetics for header*/
      .Ghead {
        font-size: 250%;
        color: #eeeeee;
        font-weight: lighter;
        text-align: center;
        border-color: red;
      }
      
      /*color for the 3 lines*/
      hr:nth-child(1) {
        border-color: #eaffc4;
        max-width: 20%;
      }
      
      hr:nth-child(2) {
        border-color: #b6c399;
        max-width: 25%;
      }
      
      hr:nth-child(3) {
        border-color: #6a856a;
        max-width: 30%;
      }
      
      /*style for radio button container*/
      .mGalD {
        position: relative;
        /*background-color: blue;*/
        display: flex;
      }
      
      input[type=radio] {
        display:none;
      }
      
      /*handles aesthetics of active buttons*/
      label {
        padding: 5px 7px;
        border-radius: 5px;
        display: inline-block;
        font-size: 14px;
        color: #6a856a;
      }
      
      input:checked + label {
        background-color: #eaffc4;
      }
      
      /*handles the appearance of active divs in the display area*/
      label + div {
        position: relative;
        color: red;
        border: 2pt solid #eaffc4;
        border-radius: 5px;
        margin: 5px 0 0 0;
        display: none;
        max-width: 50%;
      }
      
      input:checked + label + div {
        display: block;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;link href="./NewbTests.css" rel="stylesheet" type="text/css"&gt;
          &lt;link rel="shortcut icon" type="image/png" href="./Assets/SumisoulLogo.png"&gt;
          &lt;title&gt;Viewport&lt;/title&gt;
        &lt;/head&gt;
      
        &lt;body&gt;
          &lt;div&gt;
            &lt;h1&gt;
              &lt;!--title and aesthetics for the head of the page--&gt;
              &lt;div class="Ghead"&gt;
                Viewport
                &lt;hr&gt;
                &lt;hr&gt;
                &lt;hr&gt;
              &lt;/div&gt;
            &lt;/h1&gt;
      
              &lt;!--Labeled Radio buttons which activate css to reveal divs--&gt;
              &lt;div class="mGalD"&gt;
                &lt;input type="radio" name="gal" id="g1" value="1"&gt;
                  &lt;label for="g1"&gt;gallery 1&lt;/label&gt;&lt;div&gt;one&lt;/div&gt;
                &lt;input type="radio" name="gal" id="g2" value="2"&gt;
                  &lt;label for="g2"&gt;gallery 2&lt;/label&gt;&lt;div&gt;two&lt;/div&gt;
                &lt;input type="radio" name="gal" id="g3" value="3"&gt;
                  &lt;label for="g3"&gt;gallery 3&lt;/label&gt;&lt;div&gt;three&lt;/div&gt;
              &lt;/div&gt;
      
          &lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I would have linked a few images to illustrate what is happening but I'm limited in links.</p>
  
  <p>In essence;
  Before:
  (button 1)(button 2)(button 3)</p>
  
  <p>Upon clicking any button:
  (button 1)[_______________________] (button 2)(button 3)</p>
  
  <p>The div shows up on the side of the corresponding button.
  I don't really know what to do to have it align in a column without separating all of the divs and breaking the inline style of the buttons</p>