JSFiddle - React, Tailwind, and code Playground

by Twisty

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="row" id="game-row">
  <!-- START of BETTING BUTTONS -->
  <div class="col " id="buttons-div"><span>
   <!-- START of HOME TEAM info -->
   <label class="col-5 btn btn-primary">
   <input type="radio" class="homeTeam" id="brazil" value="Brazil">
    <p style="text-align:left;">Brazil 
      <span style="float:right;">2 Games</span>
    </p>
    </label>
    <!-- END of HOME TEAM info -->
    <!-- START of DRAW info -->
    <label class="col-2 btn btn-primary">
   <input type="radio" class="drawOutcome" id="draw" value="Draw">4 GAMES</label>
    <!-- END of DRAW info -->
    <!-- START of VISITING TEAM info -->
    <label class="col-5 btn btn-primary">
   <input type="radio" class="awayTeam" id="russia" value="Russia">
    <p style="text-align:left;">Russia
     <span style="float:right;">1 GAME</span>
    </p>
   </label>
    <!-- END of VISITING TEAM info -->

    <p id="gugu">These are the stastics for the two teams... </p>
    </span>
  </div>

CSS

.nabar-nav>li {
  display: inline-block;
}

.navbar-nav {
  display: flex;
  flex: 1 1 auto;
}

.nav-link {
  display: inline-block;
  flex: auto;
  white-space: nowrap;
}

.navbar-brand div.item {
  display: inline-block;
  flex: auto;
  white-space: nowrap;
  line-height: 1px;
}

.caption {
  display: block;
  color: black;
  line-height: 1px;
  margin-top: -25px !important;
  margin-bottom: 15px !important;
}

div.row {
  align-content: left;
  margin: 0px -5px;
  padding: 0px;
  padding-bottom: -10px;
  white-space: nowrap;
}

#game-row {
  margin: 10px -5px -9px -5px;
}

span.a {
  display: inline;
  /* the default for span */
}

.pull-right {
  margin: -10;
}

div#buttons-div.col-10 {
  padding: 7px;
  margin: 0px;
}

span.pull-right {
  border: 0px;
}

label.col-5.btn.btn-primary {
  margin: 0px;
}

label.col-2.btn.btn-primary {
  margin: 0px;
}

nav.navbar.navbar-fixed-top.navbar-expand-md.navbar-light.bg-light {
  margin: 0px;
  padding: 0px;
}

JavaScript 1.7

$(function() {
  function myFunction() {
    //Do Stuff
  }

  function AppendFunction(id) {
    var para = $("<p>");
    var home = $("#" + id).val();
    para.append("This is the national team of " + home + ":", $("<br>"), $("<input>", {
      type: "text",
      value: home,
      id: "myInput"
    }), $("<button>").html("Copy Text").click(myFunction));

    $("#gugu").html(para);
  }

  function emptyOnDocumentClick(event) {
    var action = $(".triggered").length;
    $(".triggered").removeClass("triggered");
    return !action;
  }

  $("#brazil, #russia").on('click', function(e) {
    if ($(this).hasClass("triggered")) {
      return;
    }
    $(this).addClass("triggered");
    var myId = $(this).attr("id");
    AppendFunction(myId);
  });

  $(document).on("click", function(e) {
    if (emptyOnDocumentClick(e)) {
      $("#gugu").html("");
    }
  });
});