.tab-2 {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}

.tab-2>label {
    flex: 1 1;
    min-width: 200px;
    max-width: 400px;
    order: -1;
    opacity: .5;
    padding: .6em 1em;
    border-radius: 5px 5px 0 0;
    background-color: #999;
    color: #333;
    font-weight: bold;
    font-size: 100%;
    text-align: center;
    cursor: pointer;
}

.tab-2>label:hover {
    opacity: .8;
}

.tab-2 input,
.hidden {
    display: none;
}

.tab-2>div {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    border: solid 2px #999;
    border-radius: 0 0 10px 10px;
}

.tab-2 label:has(:checked) {
    opacity: 1;
}

.tab-2 label:has(:checked)+div {
    display: block;
}