Как сделать, чтобы кнопки не падали вниз при открытии их содержимого?

Попробуй сделать кнопки перед дивами

Проверьте это: jsfiddle.net/ajtehs4y/

Порядок ваших элементов вызывает это, потому что divs находятся между кнопками, когда они показаны, они нажимают кнопку после нее на новую строку.

JSFiddle

<button type = "button" name = "cat"><img src = "cat.jpeg" /></button>
<button type = "button" name = "dog"><img src = "dog.jpeg" /></button>
<button type = "button" name = "dog2"><img src = "dog.jpeg" /></button>
<button type = "button" name = "dog3"><img src = "dog.jpeg" /></button>

<!-- dropdown content goes after the buttons -->

<div id = "catdiv" class = "hide">
<!-- Content here -->
</div>
<div id = "dogdiv" class = "hide">
<!-- Content here -->
</div>
<div id = "dog2div" class = "hide">
<!-- Content here -->
</div>
<div id = "dog3div" class = "hide">
<!-- Content here -->
</div>