dreamcatcher scrollbox

<style>

#box {
height: auto;
width: auto;
white-space: nowrap;
overflow-x: auto;
padding-top: .2em;
padding-left:.5em;
padding-right:.5em;
padding-bottom:.2em;
box-sizing: border-box;
overflow-y: hidden;
font-family: Nintendo-DS-BIOS;
color: #000;
}

.main {
width:10.7em;
border: 3px ridge #CCCCCC;
border-radius: 10px;
white-space: normal;
display: inline-block;
margin-right:.5em;
height:14.7em;
padding: .4em;
font-size:.875em;
vertical-align: middle;
margin-right: .5em;
background: white;
overflow-y: scroll;
overflow-x: hidden;
text-align: left;
line-height: 1;
}

.more {
width:10.7em;
border: 3px ridge #CCCCCC; border-radius: 10px;
white-space: normal;
display: inline-block;
margin-left:.5em;
height:14.7em;
padding: .4em;
font-size:.875em;
vertical-align: middle;
margin-right: .5em;
background: white;
overflow-y: scroll;
overflow-x:hidden;
text-align: left;
line-height: 1;
}

mark {
font-family: Pixelated MS Sans Serif;
font-size:1.3em;
color:#ccc;
-webkit-text-stroke: 0.5px #424242; background:none;
}

.fogmask {
-webkit-mask-image: url(https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png);
-webkit-mask-size: 110%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}

a {
text-decoration: none !important;
}

a:hover {
color: #ccc;
}

a {
color: #000;
}

</style>
<div id="box">
<div class="main"><p> <img style="width:1.2em; height:auto;" src="https://dl.dropbox.com/s/yd08o3qhzvptqza/bed61b43_original.gif"> <mark>title</mark> <br> text text text text text text text text text text text text text text text text <br><br> <img style="width:9.2em; heigh:5em;" src="https://dl.dropbox.com/s/la99pb2e1nrf3eh/FA0C190D.jpeg" class="fogmask"><br><br> <img style="width:1.2em; height:auto;" src="https://dl.dropbox.com/s/33k5sbi111m7cfe/icon_pd_24px.gif"> <mark> title </mark> <br> text text text text text text text text text text text text text text text text <br><br> <img style="width:1.2em; height:auto;" src="https://dl.dropbox.com/s/l009s5uwrpp0b3k/dab66926_original.gif"> <mark>title</mark> <br> text text text text text text text text text text text text text text text text <br><br> <img style="width:1.2em; height:auto;" src="https://dl.dropbox.com/s/nlq81kpf5y1e4ls/music_14.gif"> <mark>title</mark> <br> text text text text text text text text text text text text text text text text <br><br></p>
</div>

<div class="more"><p> <img style="width:1.2em; height:auto;" src="https://dl.dropbox.com/s/q7i2rcqg4nczt9d/75aceb66_original.gif"> <mark>title</mark> <br> <strong> text </strong> text text text text text text text text text text text text text text text <br><br> <strong> text </strong> text text text text text text text text text text text text text text text  <br><br> <strong> text </strong> text text text text text text text text text text text text text text text <br><br></p></div>