JSFiddle - React, Tailwind, and code Playground

by Nimitt Shah

HTML

<div class="container">
<div class="input-group">
   <div><input class="input"></div>
   <div><button class="button">Get Data Dummy Text</button></div>
</div>
</div>

CSS

.container {
      border: 1px red solid;
      width: 35rem;
    }

    .input-group {
      border-collapse: separate;
      display: table;
      position: relative;
    }

    .input-group>div {
      display: table-cell;
    }

    .input-group>div:first-child {
      width: 100%;
    }

    .input {
      position: relative;
      z-index: 2;
      width: 100%;
      font-size: .875rem;
      line-height: 1.5;
    }

    .button {
      color: #fff;
      background-color: #0b0b0b;
      border: 0;
      padding: .375rem .75rem;
      text-align: center;
      white-space: nowrap;
    }