JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
<div class="container-fluid">

<br/>

<div class="input-group">
  <input type="text" name="calculation" class="form-control" placeholder="Calculation, eg: (5 - 2)/(7 + 4)">
</div>

<br/>

<div class="input-group">
  <span class="input-group-addon">=</span>
  <input type="number" name="result" class="form-control" placeholder="Result" readonly>
</div>

<br/><br/>

<button type="button" name="calculate" class="btn btn-info">Calculate !</button>

</div>

JavaScript

$('button[name=calculate]').click(function() {
	var calculation = $('input[name=calculation]').val();
  var result = eval(calculation); /* Only parse the first number of the complete calculation */
  $('input[name=result]').val(result);
});