Source code for https://formidable-masterminds.com/format-radio-buttons-as-text-blocks/

radio-button-html.html

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <div  id="field_[key]_label" class="frm_primary_label">[field_name]
        <span class="frm_required" aria-hidden="true">[required_label]</span>
    </div>
    <div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">
        <div class="flex-display" data-target="#field_[key]-0">
            <div class="image-icon"><i class="fal fa-weight"></i></div>
            [input opt=1]
        </div>
        <div class="flex-display" data-target="#field_[key]-1">
            <div class="image-icon"><i class="fal fa-dumbbell"></i></div>
            [input opt=2]
        </div>
        <div class="flex-display" data-target="#field_[key]-2">
            <div class="image-icon"><i class="fal fa-salad"></i></div>
            [input opt=3]
        </div>
    </div>
    [if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
    [if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>

radio-button-jquery.js

<script>
jQuery(document).ready(function($) {
    "use strict";
    $("div.flex-display").on("click", function(){
        /* get the target input */
        var data_target = 'input' + $(this).data('target');
        $(data_target).prop('checked', 'true');

        /* remove is_selected class from previously clicked radio buttons */
        $("div.flex-display").each( function(){
            if ( $(this).hasClass("is_selected") ) {
                $(this).removeClass("is_selected");
            }
        });

        $(this).addClass("is_selected");
    });
});
</script>

radio-button-styles.css

<style>
div.flex-display {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: .5px solid rgb(127, 127, 127);
    border-radius: 7px;
    padding: 2rem;
    width: 44rem;
}
div.flex-display:not(:nth-last-child(1)) {
    margin-bottom: 2rem;
}
div.flex-display:hover, div.flex-display:focus, div.flex-display:active, div.flex-display.is_selected {
    border: 3px solid rgb(108, 234, 236);
    background-color: rgb(171, 244, 235);
}
.with_frm_style .vertical_radio .frm_radio label {
    text-indent: -10px;
}
.with_frm_style .vertical_radio .frm_radio input[type="radio"] {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}
div.flex-display i.fal {
    font-size: 5rem;
    margin-right: 2rem;
}
</style>