Image breaks the title

I have an image and underneath it I have a title, next to it I have three blocks. Here is the image:

ButwhenIaddjustonetitleline,itbreaks,theimageendsupgoingdown.

I wanted to leave the image all the same with a line or with two lines, they did not move, as in the first image?

HTML

<section class="lectures">
    <article class="lectures-content">
        <img src="http://imagens.canaltech.com.br/54960.81428-Facebook.jpg"><h3class="lectures-title"><a href="#">Performance em CSS - BrazilJS 2012 DUAS LINHAS</a></h3>
            <span class="lectures-about">Link da palestra:</span>
            <span class="lectures-about">Duração:<strong>10:20</strong></span>
            <span class="lectures-about">Palestrante:<strong>Paul Ishid</strong></span>
             <span class="watch"><a href="#">Assista agora</a></span> 
    </article>
</section>
<section class="lectures">
    <article class="lectures-content">
        <img src="http://imagens.canaltech.com.br/54960.81428-Facebook.jpg"><h3class="lectures-title"><a href="#">Performance em CSS - BrazilJS 2012</a></h3>
            <span class="lectures-about">Link da palestra:</span>
            <span class="lectures-about">Duração:<strong>10:20</strong></span>
            <span class="lectures-about">Palestrante:<strong>Paul Ishid</strong></span>
             <span class="watch"><a href="#">Assista agora</a></span> 
    </article>
</section>
<section class="lectures">
    <article class="lectures-content">
        <img src="http://imagens.canaltech.com.br/54960.81428-Facebook.jpg"><h3class="lectures-title"><a href="#">Performance em CSS - BrazilJS 2012 DUAS LINHAS</a></h3>
            <span class="lectures-about">Link da palestra:</span>
            <span class="lectures-about">Duração:<strong>10:20</strong></span>
            <span class="lectures-about">Palestrante:<strong>Paul Ishid</strong></span>
             <span class="watch"><a href="#">Assista agora</a></span> 
    </article>
</section>

CSS

.lectures {
  width: 300px;
  overflow: hidden;
  margin: 20px;
  padding-right: 22px;
  font-family: 'Aleo';
  display: inline-block;
  position: relative; }
  .lectures:before {
    content: '';
    position: absolute;
    border-right: 1px solid #DADADA;
    position: absolute;
    height: 60%;
    right: 0;
    top: 50px; }
  .lectures img {
    width: 280px;
    height: 150px;
    display: block;
    margin: 0 auto;
    border-radius: 5px; }
  .lectures .lectures-title {
    text-align: center;
    font-size: 16px;
    font-family: helvetica;
    padding-bottom: 7px;
    margin: 5px; }
    .lectures .lectures-title a {
      color: #D90452; }
  .lectures .lectures-about {
    display: block;
    padding: 0 0 10px 10px;
    font-family: 'helvetica';
    font-size: 12px;
    color: #f2d750;
    padding-top: 7px;
    background: #333;
    margin-top: 10px;
    border-radius: 10px;
    background: #8e7300; }
  .lectures strong {
    padding-left: 5px;
    color: #F2F2F2; }
  .lectures h3 {
    height: 50px;
  }

.watch {
  display: block;
  text-align: center; }
  .watch a {
    background: #f2d750;
    color: #D90452;
    border-bottom: 4px solid #8e7300;
    border-radius: 10px;
    font-size: 20px;
    padding: 10px;
    display: block;
    width: 70%;
    margin: 10px auto; }

link