JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/latest/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/latest/slick-theme.css">
<script src="https://rawgit.com/fredkingham/slick/master/slick/slick.js"></script>
  <title>HeresHowPrototype</title>

<body>
  <div id="leftContainer" class = "borderContainer">left </div>
  <div id="middleContainer">
      <div id= "questionContainer">
        <!-- contains question and set of buttons -->
        <div class = "questions" id = "questionText">
          <div><p>My husband rarely gets out of bed until 10am and then he sits around in his dressing gown all day</p></div>
           <div><p>There's a tooth pick stuck in my washing machine. How can I get it out?</p></div>
           <div><p>I can't get rid of the image of Jeremey Corbyn in his underpants when I close my eyes</p></div>
            <div><p>Would it be too much to ask my children to hang up their coats?</p></div>
        </div>
        <div id = "feedbackButtonContainer">
          <div id = "likeButton"></div>
          <div id = "me2Button"></div>
        </div>
      </div>  
      <div id = "inputResponse">
        <!-- input field for user to type a response -->
        input
      </div>
      <div id = "otherResponses">
        <!-- other responses -->
        other
      </div>
  </div>
  <div id="rightContainer" class = "borderContainer">
  <!-- new question button -->  
    
  </div>
</body>

CSS

body {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
     background-color: #DEA940;
}
		
#leftContainer {
    width: 30%;
    height: 250px;
    background-color: #DEA940;
    flex-grow: <property unused>
    flex-shrink: <property unused>
    flex-basis: <property unused>
}
	
#middleContainer {
    width: 40%;
    height: 250px;
    background-color: #DEA940;/*#F3D04D;*/
    flex-direction: column;
    align-content: space-around;
    flex-grow: <property unused>
    flex-shrink: <property unused>
    flex-basis: <property unused>
}
	
#rightContainer {
    width: 30%;
    height: 250px;
    background-color: #DEA940;
    flex-grow: <property unused>
    flex-shrink: <property unused>
    flex-basis: <property unused>
}
	
#questionContainer, #inputResponse, #otherResponses {
 /* display: flex;*/
  justify-content: center;
  flex-direction:column;
  flex-wrap: wrap;
  
  margin: 2%;
  background-color: #FFF764;
  border: 1% solid;
  border-radius: 5px;
  border-color: #fff764;
}

#questionContainer {
  margin-top: 5%;
  margin-bottom: 0;
 
}

.slide {
  width: 100%;
  height: 100%;
}
.slide h2 {
  margin: 25% 0 20px;
  color: #fff;
}
.questions p {
  width: 60%;
  margin: 10% 20% 10%;
  font-size: 26px;
  color: #fff;
}

JavaScript

$('.questions').slick({
    outline: none,
    slidesToShow: 1
});