JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
<div id="search_box">			
			<div id="btn_search_orange">Button 1</div>		
			<div id="btn_search_black">Button 2</div>		
</div>
</div>

CSS

#wrapper{
            width:600px;
            height:600px;
            position:relative;
        }

        #search_box {	
			background-color:#050505;
            height:300px;
			/*width: 600px;	*/    /* THIS WILL WORK */
            width: 100%;           /*WON'T WORK*/ 
			display: table-cell;
            vertical-align: middle;
            text-align: center;

		}

		#btn_search_orange{
         display: inline-block;
          width: 40%;
          height: 80%;
          text-align: left;
          background-color:#e47700;
		}
		
		#btn_search_black{
          display: inline-block;
          width: 40%;
          height: 80%;
          text-align: left;
          background-color:#555454;
			
		}