Alinha botões na mesma Linha mesmo com conteudo OCULTO

Boa tarde pessoal então estou enfrentando um problema aqui que não sei ao certo como resolver, mas provavelmente seria Javascript/Jquery.

meu problema é o seguinte, eu tenho uma lista de botões que são inseridos dentro de um foreach, mas após cada botão ser inserido eu insiro uma tag <object> que fica com o style="display:none;" e quando clicado no botão esse style muda para display:block; o meu problema está ai, quando eu clico no botao e o conteudo de object aparece de fato os outros botões após aquele são "jogados para baixo".

Por exemplo:
<button id="1"><object id=object 1><button id="2"><object id=object 2><button id="3"><object id=object 3>

ou seja, ao clicar por exemplo no botao 2, o botao 3 é arrastado para abaixo daonde o conteudo é exibido, eu gostaria de saber se há alguma forma de isso ser resolvido.

Vou botar os trechos de código do qual eu me refiro para facilitar o entendimento da galera.

if ( isset($object[$project][$tab]) )
{

 if ($tab <> 'publicacao') {
 echo $object[$project][$tab] . "&" . $date[$project][$tab] . "&" . $link;
 }
 else {

 foreach ($object[$project][$tab] as $index => $value) {

 //echo "<a href= \"$value\" >\".Publicação $index.\"</a></br>";
 //echo $value;

 echo "<button class='pub $index' onclick=\"botao ($index)\" style=\"display:inline !important;\">Publicação $index </button>";
 echo "<object data=$value id=\"$index\" height=\"788px\" type=\"application/pdf\" width=\"1427px\" style=\"display:none;\"></object>";

 }
 }
	}
 

function botao (index)

	var TAM = <?php echo $arrlength; ?>;

 //document.getElementById(index).style.display="block";

 //var el = document.getElementByClass(index);

 for (var i=1;i<=TAM;i++)
 {
 if ( i == index){
 document.getElementById(i).style.display="block";
 }
 else{
 document.getElementById(i).style.display="none";
 }

 }