<div class="center">
  <div class='radio-group'>
    <label class='radio-label'>
        <input name='snacks' type='radio' id='pizza' checked='checked'>
        <span class='inner-label'>Pizza</span>
    </label>
    <label class='radio-label'>
        <input name='snacks' type='radio' id='nachos'>
        <span class='inner-label'>Nachos</span>
    </label>
    <label class='radio-label'>
        <input name='snacks' type='radio' id='burgers'>
        <span class='inner-label'>Burgers</span>
    </label>
    <label class='radio-label'>
        <input name='snacks' type='radio' id='mayo'>
        <span class='inner-label'>Mayonnaise</span>
    </label>
</div>
</div>

$border-bottom-input: 1px dashed rgba(255, 255, 255, 0.25);
$border-bottom-input-focus: 1px solid rgba(255, 255, 255, 0.75);
$border-bottom-transition: border-bottom 0.5s ease;

body {
  background: #111;
  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 15px;
  min-height: 100vh;
}

.center {
  display: flex;
  min-height: 100vh;
}

.radio-group {
    margin: auto;
    display: flex;
  
    @media (max-width: 48em) {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

.radio-group-label {
    display: block;
    width: 100%;
    margin: 10px 0;
}

.radio-label {
    position: relative;
    display: inline-block;
    margin: 10px;

    @media (max-width: 48em) {
        display: block;
        margin: 10px 0;
    }

    input {
        opacity: 0;
        position: absolute;
    }

    .inner-label {
        position: relative;
        display: inline-block;
        padding-left: 40px;

        &:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: $border-bottom-input;
            width: 30px;
            transition: $border-bottom-transition;
        }
    }

    input:focus ~ .inner-label {
        &:before {
            border-bottom: $border-bottom-input-focus;
        }
    }

    input:checked ~ .inner-label {
        &:after {
            content: '\2713';
            color: #fff;
            position: absolute;
            font-size: 12px;
            left: 12px;
            top: 1px;
        }
    }
}