DIVs don’t vertically align in horizontally scrolling DIV

Question

I’m trying to make a <div> with horizontal scroll only, and I achieved this by using <span>s with white-space: no-wrap; within a <div> with overflow-x: scroll;. The problem is that I can’t use paragraphs with wrapping text within these <span>s, because it breaks the layout in Chrome.

These are what I want (works in Firefox) and what I’ve got in Chrome:

The problem happens every time a paragraph text wraps inside the <span>s.

This is my HTML and CSS:

.info {
  width: 250px;
  height: 200px;
  float: left;
}
.list {
  height: 200px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.item {
  height: 175px;
  width: 175px;
  display: inline-block;
  margin-left: 5px;
  overflow: hidden; /* without this, the layout breaks in Firefox, too */
}
.item * {
  white-space: normal;
}

<div id="listOne red">
  <div class="info blue">
    <p>Info regarding this list of items</p>
  </div>
  <div class="list orange">
    <span class="item yellow">
      <p>text</p>
      <p>more text, in another line, now wrapping</p>
      <p>and etc and etc</p>
    </span>
    <span class="item yellow">
     <p>second item</p>
    </span>
    <span class="item yellow">
     <p>third item</p>
    </span>
    <span class="item yellow">
     <p>and more</p>
    </span>
  </div>
  <div class="clear"></div>
</div>

Does someone know how to fix this? Or does someone know another way to make this <div> with horizontal scroll? (I’m using fluid layout, so my orange div does not have a fixed width).

Answer 1

Fixed :-)

The problem was not the line breaks, it was the vertical alignment. Thanks to tahdhaze09 who helped me to figure out the problem, this is the solution I've got:

.item {
  height: 175px;
  width: 175px;
  display: inline-block;
  margin-left: 5px;
/*overflow: hidden; without this, the layout breaks in FF too - REMOVED */
  vertical-align:text-top; /* ADDED */
}

I don't know why, but overflow:hidden forced the inline elements to align on top on Firefox. It is unnecessary then. vertical-align:text-top fixed the issue in all major browsers.