JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <!-- tree of life wrapper 1/12 of the row with -->
  <div class="col-sm-1 col-tree">
    <!-- actual glyph icon -->
    <span class="glyphicon glyphicon-tree-deciduous" aria-hidden="true" style="font-size:2em;"></span>
  </div>
  
  <!-- input group wrapper 11/12 of the row with -->
  <div class="col-sm-11">
    <!-- buttons -->
    <span class="input-group">
    <span class="input-group-addon">Search:</span>
    <input type="text" class="form-control" id="myText" placeholder="Enter item" />
    <a class="btn btn-success input-group-addon" id="myButton">DO IT!</a>
    </span>
    <!-- text output container -->
    <div style="padding:1em">
      <ul id="output">
        <!-- nothing here, but will be added in JavaScript -->
      </ul>
    </div> <!-- text output wrapper -->
  </div> <!-- col -->
</div> <!-- row -->

CSS

body {
  padding: 2em;
}

#output {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

.col-tree {
  max-width: 4em;
  padding-left: 2em;
  color:#771155;
  text-align:right;
}

#output li span {
  display: block;
  padding-left: 2em;
  color: #888;
  margin-bottom: 1.0em;
}

JavaScript

//select evertything that has a class btn and attach click to it
$('#myButton').click(function() {
  //here, `this` points to control that was clicked
  var text = $("#myText").val();
  //create a <li> for inside <ul>
  var newLiElement = $("<li> Searched: " + text + "</li>");
  //append it to ul, as if you typed it inside by hand
  $('#output').append(newLiElement);

  // normally you would call server here with e.g. 
  // $.post("/search",{question:text}, function(res) { ... then code below...
  // ..but instead we emulate server response with this string:
  var serverResult = "server call not implemented " + " @ " + new Date().toLocaleTimeString();
  newLiElement.append($("<span>" + serverResult + "</span>"));

  //}) <-- end the call-back function and close bracket here if calling server
});