JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="body">

<div class="wrapper">
<span class="inline">

 <input class="inputbold" type="text" name="" placeholder="boldinput"  /> 
 <div style="text-align: right;">

 <input class="inputbold" type="text"  name="" placeholder="blah"/> </div>
    
</span>

    </div>
    
    </div>

CSS

.inline
{
display: inline;

	}

input
{
	width:15%; 
			font-weight:bold;
			background-color:transparent;
			border: 1px solid;
			font-size: 13px;
			font-family: Arial;

}



		html
		{
		
		height: 100%;
		 margin-bottom: 0px;
		}
		
		
		* {
    margin: 0;
}
		
		
		
		.body {
		
		font-family: Arial;
		font-size: 13px; 
		background-color: #ffffff;
		margin-top:0px;
		margin-left:10%;
		margin-right: 10%;
		margin-bottom: 0px;
		padding:0
		height: 100%;
		line-height: 200%;
		}
		


.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {