JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text"/>

SCSS

$input-height: 44px;
$border-size: 1px;
$font-size: 1.125rem;
$line-height: 1.3;

* {
	&, &:before, &:after {
   	box-sizing: inherit;
    box-sizing: border-box;
	}
}

body{
	font: #{$font-size} / #{$line-height} sans-serif;
}

input{
	$line-height: 1;
	border: $border-size solid black;
	font: inherit;
	line-height: $line-height;
	
	/* it gives 44px in Firefox, 47 in Chrome and Safari */
	padding: calc(((#{$input-height} - (#{$border-size} * 2)) - (#{$font-size} * #{$line-height})) / 2);
}