JSFiddle - React, Tailwind, and code Playground

by tylerbrownhenry

HTML

<input type='text'/>

CSS

.ex{
  z-index:10000;
width:0px;
}

.exMark{
 width:150px; 
  z-index:1000;
  height:2px;
  position:absolute;
}

.exImage{
  position:absolute;
  width:150px;
  height:50px;
  background-repeat:no-repeat;
 ...

JavaScript

jQuery(document).ready(function($) {

var input = $('input'),
divWidth = input.width();
  input.wrap('<div class="ex" style="width:'+divWidth+';"></div>').before('<div class="exMark exImage"></div>');
});