.demotab {display: flex; flex-wrap: wrap;}

.demotab label {
order: 1;
display: block;
padding: 1rem 2rem;
margin-right: 0.3rem;
cursor: pointer;
background: blue;
font-weight: bold;
transition: background ease 0.4s;}

.demotab .dtab {
order: 98;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
background: #fff;}

.demotab input[type="radio"] {display: none;}

.demotab input[type="radio"]:checked + label {background: yellow;}

.demotab input[type="radio"]:checked + label + .dtab {display: block;}

@media (max-width: 43em) {.demotab .dtab,
.demotab label {order: initial;}
.demotab label {
width: 95%;
margin-right: 0.1;
margin-top: 0.4rem;}}

body {
background: #33FF57;
min-height: 100vh;
box-sizing: border-box;
padding-top: 11vh;
font-family: "fangsong", "Arial", "Georgia", Helvetica, Arial, "Algerian", sans-serif;
font-weight: 250;
line-height: 1.8;
max-width: 50rem;
margin: 0.5 auto;
font-size: 110%;}