JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>width demo</title>
<style>
body {
	font-family:Arial, Helvetica, sans-serif;
background: yellow;
font-size:16px;
}
button {
font-size: 16px;
margin: 2px;
}
p {
width: 150px;
border: 1px red solid;
}
div {
color: red;
font-weight: bold;
}

::-webkit-input-placeholder {
   color: red;
    font-size: 16px !important;
	font-family:Arial, Helvetica, sans-serif;
}

:-moz-placeholder { /* Firefox 18- */

    font-size: 16px !important;
	font-family:Arial, Helvetica, sans-serif;
}

::-moz-placeholder {  /* Firefox 19+ */
  
    font-size: 16px !important;
	font-family:Arial, Helvetica, sans-serif;
}

:-ms-input-placeholder {  
  
    font-size: 16px !important;
	font-family:Arial, Helvetica, sans-serif;
}
span{font-size: 16px !important;font-family:Arial, Helvetica, sans-serif;}
input{ overflow:hidden;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<div  style="width:270px; overflow:hidden;">
<input type='text' placeholder='Hello how are you' style="width:270px" / >
<input type='text' placeholder='Hello hoasdyou' style="width:270px" / ><br>
<input type='text' placeholder='Hell' style="width:270px" / ><br>
</div>



<script>



	

	$( document ).ready(function() {
		
		
		$(":input[placeholder]").each(function(index, element) {
            
			
			//var myString = ($(this).attr('placeholder') );
        //var n = myString.length;
		//var stringWidth = (n*20);
		var totalLength = $(this).width();
		var middlePoint = totalLength/2;
		//var halfstringWidth = stringWidth/2;
		//var leftShift=(totalLength-stringWidth)/2;
		
		var _$tmpSpan = $('<span/>').html($(this).attr('placeholder')).css({
		position: 'absolute',
		left: -99999,
		top: -9999
		}).appendTo('body'),
			textWidth = _$tmpSpan.width();
		_$tmpSpan.remove();
		
		
		var halftextWidth = textWidth/2;
		alert(halftextWidth);

		var leftShift=(middlePoint-halftextWidth);
		
		
		 $(this).css(...