JSFiddle - React, Tailwind, and code Playground

HTML

<label for="formation"> Formation </label>
<select id="formation" name="formation">
  <option value="1"> 1-1-2 </option> <!-- 2 Attackers-->
  <option value="2"> 1-2-1 </option> <!-- 2 Midfielders-->
  <option value="3"> 2-1-1 </option> <!-- 2 Defenders-->
</select>

<div class="attackers">
  <div class="card" id="attacker_1"> Attacker 1 </div>
  <div class="card" id="attacker_2"> Attacker 2 </div>
  <div class="card" id="attacker_3"> Attacker 3 </div>
</div>

<div class="midfielders">
  <div class="card" id="midfielder_1"> Midfielder 1 </div>
  <div class="card" id="midfielder_2"> Midfielder 2 </div>
  <div class="card" id="midfielder_3"> Midfielder 3 </div>
</div>

<div class="defenders">
  <div class="card" id="defender_1"> Defender 1 </div>
  <div class="card" id="defender_2"> Defender 2 </div>
  <div class="card" id="defender_3"> Defender 3 </div>
</div>

CSS

.card {
  width: 33%;
  height: 100px;
  border: 1px dotted red;
  box-sizing: border-box;
  float: left;
  text-align: center;
}

.attackers {
  width: 100%;
  height: 100px;
}