JSFiddle - React, Tailwind, and code Playground

CSS Grid + Font Awesome 5.0.0 SVG

by Christopher O

HTML

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>
<div class="squarebubble" id="righty2">

  <div class="iconBtnOut iconBtnOutL"><i class="far fa-smile iconBtnIn"></i></div>

  <div class="iconBtnOut iconBtnOutR"><i class="fas fa-paperclip iconBtnIn"></i></div>

  <div><input type="text" placeholder="Type a message" id="TypeMsg" /></div>

  <div class="iconBtnOut iconBtnOutR"><i class="far fa-paper-plane iconBtnIn"></i></div>

</div>

CSS

body {
  font-size: 16px;
}

#righty2 {
  /* height: 35px; */
  background-color: #cdcdcd;
  padding: 5px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 30px 30px auto 30px;
}

#TypeMsg {
  border-radius: 10px;
  border: 0px;
  background-color: #fff;
  width: 100%;
  font-size: 20px;
  height: 30px;
  /* padding-left:5px; */
}

.iconBtnOut {
  /*  Font container div  */
  background-color: #fff;
  color: #aaa;
  font-size: 1.4rem;
  text-align: center;
  border-radius: 5px 10px 8px;
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.iconBtnOut:hover,
.iconBtnOut:active {
  color: #222;
  background-color: #add8e6;
}

.iconBtnOutL {
  border-radius: 10px 5px 8px;
}

.iconBtnOutR {
  border-radius: 5px 10px 8px;
}

.iconBtnIn {
  /*  Font  */
  margin-top: 4px;
}

#tricontentwrapper {
  float: left;
  width: 100%;
  text-align: center;
}

#tricontentcolumn {
  margin: 0 40px 0 40px;
  /* Margins should be "0 trirightcolumnWidth 0 trileftcolumnWidth */
  height: 30px;
}