box-model.css

.illustration {
    background-color: #eecea0;
    position: relative;
    font-size: 0.6rem;
    line-height: 0.7rem;
    align-self: center;
}

.box-model-example {
    width:16vw;
    height:10vw;
    border:1vw solid #f4dd9d;
    padding:2vw;
    margin:1vw;
    background-color: #c7cd8d;
}

@keyframes show-sizes {
    from {
        transform: translate(3vw, 0px)
    }

    to {
        transform: translate(3vw, -14vw)
    }
}

#animate-box-sizing, #show-outline {
    visibility: hidden;
    position: absolute;
}

#animate-box-sizing:checked ~ .border-boxed {
    animation-play-state: running;
}

#show-outline:checked ~ .box-model-example {
    outline: 4px red solid;
}

.toggle-button {
    display:inline-block;
    background-color: rgb(2, 134, 9);
    padding: 5px 8px;
    color: #fff;
    border-radius: 3px;
    margin:5px;
    cursor: pointer;
    white-space: nowrap;
}

.box-model-buttons {
    display: flex;
    align-items: center;
    flex-direction: column;
}

#animate-box-sizing:checked ~ div.box-model-buttons > #animate-box-sizing-label, #show-outline:checked ~ div.box-model-buttons > #show-outline-label {
    background-color: rgb(134, 6, 2);
}

#animate-box-sizing:checked ~ div.box-model-buttons > #animate-box-sizing-label:before{
    content:'Stop Size Animation'
}

#animate-box-sizing-label:before{
    content:'Play Size Animation'
}

#show-outline:checked ~ div.box-model-buttons > #show-outline-label:before{
    content:'Hide Outline'
}

#show-outline-label:before{
    content:'Show Outline'
}


.box-model-example.border-boxed {
    box-sizing: border-box;
    animation-name: show-sizes;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-play-state: paused;
    transform: translate(3vw, 0px)
}

.box-model-inner-div {
    width:100%;
    height:100%;
    background-color: #9bb3bf;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}