Jak wyśrodkować diva względem innego diva?

Otóż mam rozmieszczone je tak

Mógłbym sobie zielonego ustawić na stałe, ale w czerwonym niestety będzie dynamiczny tekst co znaczy że wysokość będzie się zmieniać i zielony już nie będzie po środku :/
Chciałbym uzyskać taki efekt

<div class="answer">
  <div class="answer_box">      <!-- div1 -->
    <div class="content">           <!-- div2 -->
       XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX XXXXXX 
    </div>
    <div class="click">               <!-- div3 -->
      <a><img src="images\25\logo_dis.png" onclick="ChangeState(this);" /></a>
    </div>
    <div class="clearlol"></div>
  </div>
  <div class="meta">Dodane <u>17 marca 2013</u> przez <a>Anonim</a>.</div>
</div>

.answer {  
		width: 608px;
		margin: 0 0 10px;
}

.answer .answer_box {  /* div1  */
		color: #aaa;
		padding: 5px 4px 5px;
		width: 550px;
		border: 2px dotted #aaa;
}

.answer_box .content {   /* div2  */
		width: 510px;
		float: left;
}

.clear {
		clear: both;
}

.answer_box .click {        /* div3  */
		width: 29px;
		margin-left: 6px;
		float:left;
}

Niestety nie wiem jak taki efekt osiągnąć. Help? :(

<div id="div1">
<div id="div2">po lewej<br />jest wysoki<br />...<br />...<br />...<br />...</div><div id='div3'>po prawej</div>
<div id="div4">cokolwiek</div>
</div>

#div1 { width: 500px; background: black; }
#div2 { background: red; display: inline-block; vertical-align: middle; width: 400px; }
#div3 { background: green; display: inline-block; vertical-align: middle; width: 100px; }
#div4 { background: blue; }

pomiędzy zamknięciem diva2 a otwarciem diva3 NIE MOŻE być spacji, nowej linii - czegokolwiek - bo się rozjedzie.