JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.sidr/2.2.1/jquery.sidr.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<div class="container">
<h3>KW  Select</h3>

<form class="form-horizontal">
<div class="row">
<div class="col-md-12">


<div class=" btn-group-full" role="group" aria-label="...">
    <a type="button" class="btn btn-link">this is a columnheader with a really really long name</button>
  <a type="button" class="btn btn-link"><i class="fa fa-sort"></i></button>
</div>

<div class="row">



<label class="col-md-4">Field label</label>
<div class="col-md-8">

      <div class="input-group">
        <span class="input-group-addon">
        <i class="fa fa-search"></i>
      </span>
        <input type="text" class="form-control" placeholder="Type to Find Resource Name" data-com.agilebits.onepassword.user-edited="yes">
      </div>
<div class="pull-right">
<button class="btn btn-link btn-sm"><i class="fa fa-plus"></i> Add A New Resource Name</button>   
</div>

      <!-- /input-group -->
</div>
</div>

</form>

</div>

CSS

.fa {
  color: lightgray
}

.nav > li > a.bg-primary {
  color: #fff
}
.navbar-default {
  padding:10px 5px;
  border-radius:0;
  }
}

.nav > li > a:hover.bg-primary {
  background-color: #000;
  color: #fff
}

.subnav-fixed-top {
  position: absolute;
  top: 50px;
  width: 100%;
  border-radius: 0
}
.ui-app-toolbar-search {
  width:200px
  }

.tooltip {
  width:160px!important
  }
li {margin-right:5px}
.btn-group-full .btn:first-child .btn {
  width:100%;
  text-align:left;
  white-space:normal
  }

.btn-group-full .btn:last-child {
  width:35px;
  }
  .btn-group-justified .btn-group .btn {
  width:45px;
  }
  
}

JavaScript

$('.navbar-responsive button').tooltip();