JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="main">
    <div class="text">
      <span>Телефон:</span>
    </div>
    <div class="input-wrap">
      <input type="text" class="input" placeholder="+7 926 987-65-43" /></div>
  </div>
</div>

CSS

.wrapper {
  width: 800px;
  height: 400px;
  padding: 40px;
  background: gray;
}

.main {
  width: 100%;
  background: yellow;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.text {
  background: orange;
  margin-right: 10px;
  font-size: 20px;
}

.text::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: bottom;
}

.text span {
  vertical-align: bottom;
}

.input-wrap {
  flex: 1;
}

.input {
  font-size: 24px;
  width: 100%;
}