JSFiddle - React, Tailwind, and code Playground

horiz grid

by Christopher O

HTML

<div class="chatdiv">

  <div class="headSearchDiv">
    <div class="headSearchPart">A</div>
    <div class="headSearchPart"><input placeholder="Search chats" type="text" class="headSearchBox" v-model="headSearch" /></div>
    <div class="headSearchPart">C</div>
  </div>

</div>

CSS

body {
  margin: 40px;
}

.chatdiv {
  width: 350px;
}

.headSearchDiv {
  display: grid;
  grid-template-columns: 50px auto 50px;
  grid-gap: 1px;
}

/* three DIVs */

.headSearchPart {
  background-color: #444;
  text-align: center;
}

/* Input */

.headSearchBox {
  width: 90% !important;
  background-color: white;
}