Boas,
Em primeiro lugar tens que ter cuidado com o fechar das tags.
Uma das maneiras que tens para alinhares elementos é usando o float
<div id="bola"><h4 style="text-align: left; display:block">Bibliotecas</h4></div>
<div id="bola2">
<img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
<hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left"></hr>
</div>
Aqui só te fechei as tags que não estavam fechadas
Acrescentei este CSS
#bola{
float: left;
}
#bola2 {
float: left;
margin-top: 20px;
}
Tens aqui o FIDDLE onde podes testar
P.S. Utilizei o margin-top
para centrar mais ou menos a #bola2
em relação à #bola
ALTERNATIVA
Caso não pretendas usar um ficheiro CSS para guardar os estilos, podes sempre adicionar ao próprio HTML
<div id="bola"style="float: left">
<h4 style="text-align: left; display:block">Bibliotecas</h4>
</div>
<div id="bola2" style="float: left;margin-top: 20px;">
<img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
<hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left"></hr>
</div>
Tens aqui o FIDDLE deste caso