JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>
  <head>
    <title>Websocket Chat Client</title>
    <link rel="stylesheet" type="text/css" href="shipyard_notepad.css" />
  </head>
  <body>
      <div id="pageContainer">
        <div id="mainTextSearcher">
          <input type="text" id="searchTextInput" />
          <div id="findButtons">
              <button id="findNextButton">find next</button>
              <button id="findPreviousButton">find previous</button>
          </div>
        </div>
    </div>
   
  </body>
</html>

CSS

html {
        height: 100%;
}
body {
  height: 100%;
}
#pageContainer {
    width: 400px;
    background: red;
    margin: auto;
}
#mainTextSearcher {
    border : solid 2px #ff00ff;
    width : 100%;
    height: 200px;
    display: block;
    
}
#searchTextInput {
    border: #000000;
    width: 100%;
    float: left;
}
#findButtons {
width: 200px;
float:right;
}
#findNextButton {
}
#findPreviousButton {
    
}