Horizontal Scroll

<style>
@font-face {
font-family:aeroblade;
src:url(https://dl.dropbox.com/s/rp1c9fy6nef7l15/Aeroblade.ttf);
}
#scroll {
width: 14.25em;
border: 1px solid #BE93D4;
white-space: nowrap;
overflow-x: auto;
padding: .5em;
box-sizing: border-box;
height: 10em;
overflow-y: hidden;
background: -webkit-linear-gradient(-90deg, #F0CEFF 0%, #F4E6FB 100%);
}
.wow {
width: 11em;
overflow-y: scroll;
border: 1px solid #000;
white-space: normal;
display: inline-block;
height: 90%;
padding: .2em;
vertical-align: middle;
background-color: #FFF;
}
mark {
font-family:aeroblade;
background: -webkit-linear-gradient(-90deg, #F0CEFF 0%, #FFF 100%);
text-shadow: -1px -1px 0 #AF83E1, 1px 1px 0 #000, -1px -1px 0 #E8B9FF, -1px 2px 0 #E8B9FF;
border: 1px solid #000;
border-radius: 3px;
padding: 0 5px 0 5px;
color: #fff;
font-size: 14px;
</style>
<div id="scroll">
<div class="wow">
<mark> <strong> Intro </strong> </mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div> <div class="wow"> <mark> <strong> Interests </strong> </mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div> <div class="wow"><mark> <strong> Notes </strong> </mark> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>