<div> help

[W3bmaster]

I'm trying to get two items to show in a row, where when it is more populated they will show 3 items across. Currently I'm having trouble getting this to display properly and I can't figure out what <div> or </div> changes are needed. Can someone assist?

<section class="inner padded">
<h2 class="title caps txt-blue-dark">AWARD NOMINEES</h2>

<div class="accordion-wrapper">
<div class="accordion"><input id="hardwareNoms" name="radio-a" type="radio" /> <label class="accordion-label" for="hardwareNoms">Hardware Nominees</label>

<div class="accordion-content">
<p class="center">Check back soon for more nominees</p>

<p>&nbsp;</p>

<div class="gridrow">
<div class="gridcol four nominee">
<div class="nominee-img"><img alt="Framos's FSM:GO product submission for the A3 Innovation Awards" src="/userAssets/image/FSMGO.png" /></div>

<div class="nominee-info">
<p><span class="name">FSM:GO</span><br />
Framos</p>

<p style="margin-bottom: 5px"><a class="btn" href="https://www.framos.com/en/fsmgo" target="_blank">View Product</a></p>

<p><a class="btn" href="https://www.show.com/exhibitors/framos-technologies-inc" target="_blank">View Exhibitor</a></p>
</div>
</div>
</div>

<div class="gridcol four nominee">
<div class="nominee-img"><img alt="AMD Embedded+ Architecture" src="/userAssets/image/AMD_award.jpg" /></div>

<div class="nominee-info">
<p><span class="name">AMD Embedded+ Architecture</span><br />
AMD - Advance Micro Devices, Inc.</p>

<p style="margin-bottom: 5px"><a class="btn" href="https://www.amd.com/en/products/embedded/embedded-plus.html" target="_blank">View Product</a></p>

<p><a class="btn" href="https://www.show.com/exhibitors/advanced-micro-devices-inc-amd" target="_blank">View Exhibitor</a></p>
</div>
</div>
</div>
</div>

<div class="accordion"><input id="softwareNoms" name="radio-a" type="radio" /> <label class="accordion-label" for="softwareNoms">Software Nominees</label>

<div class="accordion-content">
<p class="center">Check back soon for more nominees</p>
</div>
</div>

<div class="accordion"><input id="systemsNoms" name="radio-a" type="radio" /> <label class="accordion-label" for="systemsNoms">Systems Nominees</label>

<div class="accordion-content">
<p class="center">Check back soon for more nominees</p>
</div>
</div>
</div>
</section>

 

[VBService]

BTW, you can write your code in a that way which makes it easier to read

<section class="inner padded">
  <h2 class="title caps txt-blue-dark">AWARD NOMINEES</h2>

  <div class="accordion-wrapper">
    <div class="accordion">
      <input id="hardwareNoms" name="radio-a" type="radio" />
      <label class="accordion-label" for="hardwareNoms">Hardware Nominees</label>

      <div class="accordion-content">
        <p class="center">Check back soon for more nominees</p>

        <p>&nbsp;</p>

        <div class="gridrow">
          <div class="gridcol four nominee">
            <div class="nominee-img">
              <img alt="Framos's FSM:GO product submission for the A3 Innovation Awards" src="/userAssets/image/FSMGO.png" />
            </div>

            <div class="nominee-info">
              <p>
                <span class="name">FSM:GO</span><br />
                Framos
              </p>

              <p style="margin-bottom: 5px">
                <a class="btn"
                   href="https://www.framos.com/en/fsmgo" target="_blank">View Product</a>
              </p>

              <p>
                <a class="btn"
                   href="https://www.show.com/exhibitors/framos-technologies-inc" target="_blank">View Exhibitor</a>
              </p>
            </div>
          </div>
        </div>

        <div class="gridcol four nominee">
          <div class="nominee-img">
            <img alt="AMD Embedded+ Architecture" src="/userAssets/image/AMD_award.jpg" />
          </div>

          <div class="nominee-info">
            <p>
              <span class="name">AMD Embedded+ Architecture</span><br />
              AMD - Advance Micro Devices, Inc.
            </p>

            <p style="margin-bottom: 5px">
              <a class="btn"
                 href="https://www.amd.com/en/products/embedded/embedded-plus.html" target="_blank">View Product</a>
            </p>

            <p>
              <a class="btn"
                 href="https://www.show.com/exhibitors/advanced-micro-devices-inc-amd" target="_blank">View Exhibitor</a>                     </p>
          </div>
        </div>
      </div>
    </div>

    <div class="accordion">
      <input id="softwareNoms" name="radio-a" type="radio" />
      <label class="accordion-label" for="softwareNoms">Software Nominees</label>

      <div class="accordion-content">
        <p class="center">Check back soon for more nominees</p>
      </div>
    </div>

    <div class="accordion">
      <input id="systemsNoms" name="radio-a" type="radio" />
      <label class="accordion-label" for="systemsNoms">Systems Nominees</label>

      <div class="accordion-content">
        <p class="center">Check back soon for more nominees</p>
      </div>
    </div>
  </div>
</section>

have you tried using flex
[ working code on-line ]

.accordion-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}