JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<div class="flex-container">
  <input class="c-form__input" placeholder="Enter Here" type="text" pattern="[0-9]{1,63}" required>
  <button class="c-form__button" type="submit">Get Transcript</button>
</div>

CSS

.flex-container {
  display: flex;
  height: 40px;
  /* align-items: stretch; */ /* Stretch items vertically to have the same height */
}

.c-form__input,
.c-form__button {
  flex: 1; /* Allow items to grow and take available space evenly */
  height: 100%; /* Ensure both input and button take full height of the container */
}

.c-form__input {
  /* Your input styles here */
}

.c-form__button {
  /* Your button styles here */
}