JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="wrapper">
  <div class="main">

    <div class="field">
      <div class="cell label">

        <div class="text">
          <span>Телефон:</span>
        </div>

      </div>
      <div class="cell">

        <div class="input-wrap">
          <input type="text" class="input" placeholder="+7 926 987-65-43" />
        </div>

      </div>
    </div>




  </div>
</div>

SCSS

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

.main {
  width: 100%;
  background: yellow;
  overflow: hidden;
}

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

.input-wrap {
  //max-width: 100%;
  //overflow: hidden;
}

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

.field {
  display: table;
  width: 100%;
  .cell {
    display: table-cell;
    &.label {
      white-space: nowrap;
      width: 1%;
    }
  }
}