JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="static pretty pretty-extened">$</div>
  <input class="dynamic pretty" type="number" />
  <div class="static pretty">.00</div>
</div>

CSS

.outer{
  width:300px;
  height:34px;
  display:table;
  position: relative;
  box-sizing: border-box;
}
.static{
  display:table-cell;
  vertical-align:middle;
  box-sizing: border-box;
}
.dynamic{
  display:table-cell;
  vertical-align:middle;
  box-sizing: border-box;
  width: 100%;
  height:100%;
}
.pretty{
  border: 1px solid #ccc;
  padding-left: 7px;
  padding-right: 7px;
  font-size:16px;
}
.pretty-extended{
  background: #eee;
  text-align:center;
}