Console New

HTML

<div class="mainContainer">
  <div class="container">
    <div class="content"></div>
  </div>
  <div class="footerCls">
    <div class="inputcls">
      <textarea rows="2" name="text" placeholder="Text goes here..." onkeyup="expand(event,this)"></textarea>
      <div class="wc-commands" id="wc-commands">
        <svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 22 22" version="1.1">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g transform="translate(-263.000000, -18.000000)">
              <g>
                <g transform="translate(264.000000, 19.000000)">
                  <path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Shape" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle id="Oval-2" fill="#D2D2D2" cx="10" cy="15" r="1"></circle>
                  <circle id="Oval" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="10" cy="10" r="10"></circle>
                </g>
              </g>
            </g>
          </g>
        </svg>
      </div>
      <div class="wc-send" id="wc-send">
        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="20px" viewBox="0 0 24 20" version="1.1">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
            <g transform="translate(-320.000000, -19.000000)" stroke="#FFFFFF" stroke-width="2">
              <g>
                <g transform="translate(321.000000, 20.000000)">
                  <polygon points="22 0 19 18 10 12 0 9"></polygon>
                  <path d="M9.5,11.5 L21.5,0.5"></path>
                  <polyline points="10 12 10 18 14 15"></polyline>
                </g>
              </g>
            </g>
          </g>
        </svg>
     ...

CSS

.mainContainer ::-webkit-scrollbar {
    background-color: #f4f4f4;
    width: 8px;
}
.mainContainer ::-webkit-scrollbar-thumb {
    background-color: #d2d2d2;
    width: 8px;
    border-radius: 4px;
}
.mainContainer {
  width: 100%;
  left: 2px;
  top: 0px;
  bottom: 75px;
  right: 0px;
  box-shadow: 0 0 5px 2px #ddd;
  border-radius: 10px;
  background-color: #ccc;
  position: absolute;
}

.container {
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  right: 0;
  bottom: 50px;
}

.footerCls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 56px;
  overflow: hidden;
  background: #fc3;
}

.inputcls {
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 56px;
  max-height: 125px;
}

.inputcls textarea {
  top;
  0;
  bottom: 10px;
  left: 0;
  color: #565867;
  background-color: #f4f7f9;
  resize: none;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  min-width: 225px;
  width: 75%;
  min-height: 30px;
  font-family: "intercom-font", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: none;
  outline: none;
}

#wc-commands {
  right: 82px;
  bottom: 15px;
  cursor: pointer;
  position: absolute;
}

#wc-send {
  cursor: pointer;
  right: -14px;
  background: #41c363;
  bottom: -12px;
  position: absolute;
  border-radius: 50%;
  top: initial;
  width: 80px;
  height: 80px;
}

#wc-send svg {
  margin: 28px 18px;
}