jichuwee carrd co scrollbox

<style>

 .divSquare {
  width: 30%;
  height: auto;
  margin: 3px;
  border: 2px solid black;
  float: left;
  padding: 3px;
  border-radius: 0.75em;
  background: #faedef;
   display:inline;
}
#textobody mark {
  font-family: lovely;
  font-size: 1.5em;
  border: 1px dashed black;
  background-color: #f7c0d6;
  text-shadow: -1px 0 #fff, 0 1px #000, 1px 0 #000, 0 -1px #fff, 0 0;
  color: #b84154;
  border-radius: 100%;
  padding: 0 1px 0 1px;
}
#yay {
  overflow: scroll;
  width: auto;
  height: 70px;
  overflow-x: hidden;
  text-align: left;
  font-family: "Bai Jamjuree", sans-serif;
  font-size: 1em;
  line-height: 0.875;
  font-weight: 500;
  color: #000;
}
#yay a {
  color: inherit;
  text-decoration: dotted;
  transition: color 0.25s ease;
}
#yay a:hover {
  filter: blur(0.1rem);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.3s ease-in-out;
  text-decoration: dotted;
  color: #636363;
  font-style: italic;
}
::-webkit-scrollbar {
  width: 0; /* remove scrollbar space */
  background: transparent; /* to make scrollbar invisible */
}
::-webkit-scrollbar-thumb {
  background: transparent;
}
@font-face {
  font-family: lovely;
  src: url(https://dl.dropbox.com/s/xde2bkhiie1bm8r/LovelyRegular.ttf);
}

</style>
i figured out the code here https://stackoverflow.com/questions/24977634/css-float-4-divs-in-a-square-order-float-left-only-2-and-4-does-not-work
<br>

<link href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:500,500italic" rel="stylesheet" type="text/css"/>
<div id="first" class="divSquare">
  <div id="yay">
    <div id="textobody"><br><mark>title 1 ✿</mark> you can adjust the height of box in #yay styles. . . first scrollable box <br><br /> <mark>links</mark> <a href="http://web.archive.org/web/20220409145042/https://youtube.com/c/naocrrds">youtube</a> <a href="https://twitter.com/naocrrds">naocrrds </a><br><br /> </div>
  </div>
</div>
<div id="second" class="divSquare">
  <div id="yay">
    <div id="textobody"><br><mark>title 2</mark> second scrollable box <br><br /> </div>
  </div>
</div>
<div style="clear:both"></div>
<div id="third" class="divSquare">
  <div id="yay">
    <div id="textobody"><br><mark>title 3</mark> third scrollable box<br><br /> </div>
  </div>
</div>
<div id="fourth" class="divSquare">
  <div id="yay">
    <div id="textobody"><br><mark>title 4</mark> fourth scrollable box <br><br /> </div>