arranging div class tiles vertically

I am trying to place the class called tile with a few other bits around it so that it is a vertical list. The tiles are of different sizes and don't seem to list vertically. I also want to put some text alongside it but not sure how. The first tile has a label inside it called "Overview", but the others I want to place some text to the right of the tile without messing up the vertical alignment.

<!-- begin snippet: js hide: false --> <!-- language: lang-html -->

<div id="sidebar-company">

  <a class="tileSB bg-darkBlue animated six flipInX" data-click="transform">
    <div class="brand">
      <div class="text-center">
        <p class="fg-white">Overview</p></div>
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated seven flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">

    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated nine flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png">
    </div>
  </a>

</div> <!-- End tile group -->

<!-- end snippet -->

How can I do this in CSS?

You could do either:

Display them as a block - should take up a new line:

<!-- language: lang-css -->

a.tileSB {
  display: block
}

Float and clear all the elements:

<!-- language: lang-css -->

a.tileSB {
  float: left;
  clear: left;
}

Demo in Stack Snippets

<!-- begin snippet: js hide: false --> <!-- language: lang-css -->

.tileSB {
  display: block
}

<!-- language: lang-html -->

<div id="sidebar-company">

  <a class="tileSB bg-darkBlue animated six flipInX" data-click="transform">
    <div class="brand">
      <div class="text-center">
        <p class="fg-white">Overview</p></div>
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated seven flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 2
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated eight flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 3
    </div>
  </a>

  <a class="tileSB half bg-darkBlue animated nine flipInX" data-click="transform">
    <div class="tile-content icon">
      <img src="images/mthc/arrowRight.png"> - Text 4
    </div>
  </a>

</div> <!-- End tile group -->

<!-- end snippet -->