JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docs</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
<style>
a[href^="http://maps.google.com/maps"]{display:none !important}
.panel-body{
padding: 0 !important;
}
#summary:empty {
padding: 0;
border: none;
}
#summary {
margin: auto;
max-width: 98%;
margin-top: 15px;
margin-bottom: 15px;
}
.panel.panel-default h4.panel-title {
font-size: 1.5em;
padding-top: 5px;
}
.input-group.with-btns {
margin: auto;
margin-top: 15px;
max-width: 98%;
}
.input-group.with-btns .input-group-addon{
padding: 0 !important;
border: none !important;
}
.input-group.with-btns .input-group-addon .btn{
border-radius: 0 3px 3px 0 !important;
}
</style>
</head>
<body>
<br>
<div class="container-fluid">
<!-- panel with the controls -->
<div class="panel panel-default">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left"> QC polygon builder</h4>
<button class="btn btn-warning pull-right" type="button" id="delete-button" >
Delete Everything from Map
<i class="fa fa-trash-o"></i>
</button>
</div>
<!-- start geocoding -->
<div class="input-group with-btns hide" id="geocoding__container">
<input value="" type="text" class="form-control" id="geocoding_input">
<span class="input-group-addon"><button type="button" class="btn btn-info" type="button" id="geocoding_button"> Get address </button></span>
</div>
<!-- /end geocoding -->
<div class="alert alert-info...