aloisdg/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  html {
  background-color: white;
}

.wrapper {
  width: 400px
}

.infinite {
  width: 100%;
  overflow-x: scrollbar;
  overflow-y: hidden;
  }

.middle {
  display: flex;
  gap: 5px;

}

.wrap {
  flex-wrap: wrap;
}

.linear {
  width: max-content;
}

.middle input[type=radio] {
  display: none;
}
.middle input[type=radio]:checked + .box {
  background-color: #75553F;
  color: white;
}
.middle .box {
  padding:5px 10px;
  height: 50px;
  background-color: #fff;
  border-radius: 5px;
  color: #75553F;
  border: 2px solid #75553F;
  transition: all 250ms ease;
  will-change: transition;
  cursor: pointer;
  font-weight: 900;
  display: grid;
  place-items: center;
  font-size: 1.5em;
  user-select: none;
}


  </style>
</head>
<body>
  <select id="layoutSelector">
    <option>Wrap</option>
    <option>Linear</option>
  </select>
  <br>
  <br>

<div class="wrapper">
<div class="infinite">
  <div class="middle wrap">
    <label>
      <input type="radio" name="radio" checked />
      <div class="front-end box">
        2 Single Beds
      </div>
    </label>
    <label>
      <input type="radio" name="radio" />
      <div class="back-end box">
        1 Double Bed
      </div>
    </label>
    <label>
      <input type="radio" name="radio" />
      <div class="back-end box">
        Twin Beds
      </div>
    </label>
        <label>
      <input type="radio" name="radio" />
      <div class="back-end box">
        King Beds
      </div>
    </label>
  </div>
  </div>
</div>
<script>
layoutSelector.onchange = (e) => {
  const middle = document.querySelector(".middle");
  middle.classList.toggle("wrap")
  middle.classList.toggle("linear")
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style>
	html {
	background-color: white;
	}

	.wrapper {
	width: 400px
	}

	.infinite {
	width: 100%;
	overflow-x: scrollbar;
	overflow-y: hidden;
	}

	.middle {
	display: flex;
	gap: 5px;

	}

	.wrap {
	flex-wrap: wrap;
	}

	.linear {
	width: max-content;
	}

	.middle input[type=radio] {
	display: none;
	}
	.middle input[type=radio]:checked + .box {
	background-color: #75553F;
	color: white;
	}
	.middle .box {
	padding:5px 10px;
	height: 50px;
	background-color: #fff;
	border-radius: 5px;
	color: #75553F;
	border: 2px solid #75553F;
	transition: all 250ms ease;
	will-change: transition;
	cursor: pointer;
	font-weight: 900;
	display: grid;
	place-items: center;
	font-size: 1.5em;
	user-select: none;
	}


	</style>
	</head>
	<body>
	<select id="layoutSelector">
	<option>Wrap</option>
	<option>Linear</option>
	</select>
	<br>
	<br>

	<div class="wrapper">
	<div class="infinite">
	<div class="middle wrap">
	<label>
	<input type="radio" name="radio" checked />
	<div class="front-end box">
	2 Single Beds
	</div>
	</label>
	<label>
	<input type="radio" name="radio" />
	<div class="back-end box">
	1 Double Bed
	</div>
	</label>
	<label>
	<input type="radio" name="radio" />
	<div class="back-end box">
	Twin Beds
	</div>
	</label>
	<label>
	<input type="radio" name="radio" />
	<div class="back-end box">
	King Beds
	</div>
	</label>
	</div>
	</div>
	</div>
	<script>
	layoutSelector.onchange = (e) => {
	const middle = document.querySelector(".middle");
	middle.classList.toggle("wrap")
	middle.classList.toggle("linear")
	}
	</script>
	</body>
	</html>