JSFiddle - React, Tailwind, and code Playground

by Ender

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div id="dialog-delivery" title="My Dialog">
    blah blah blah
</div>

CSS

.button-divider {
    margin: .5em .2em .5em 0;
    float: right;
    padding: .2em 0 .3em 0;
    width: auto;
}

JavaScript

$("#dialog-delivery").dialog({
    bgiframe: true,
    resizable: true,
    height: 350,
    width: 400,
    modal: true,
    buttons: {
        "Continue": function() {
            $(this).dialog("close");
            $(".option-separate").hide();
            $("#nonsubscribers").hide();
            $('<div class="radio-alert">Thank you for your selection</div>').appendTo('#subscribers');
            $("#change-subs").css('visibility', 'visible');
        },
        "Change to Non-Subscriber": function() {
            $(this).dialog("close");
            $("#subscribers").hide();
            $(".option-separate").hide();
            $("#nonsubscribers").show();
            $("#change-nonsubs").css('visibility', 'visible');
        }
    },
    open: function() {
        $('.ui-button-text:contains("Continue")')
            .parent()
            .after('<div class="button-divider">OR</div>');
    }
});