Welp. That's a good question. Gonna spoiler this, 'cause it's not a small explanation:
[spoili]
First thing you've gotta do is add in this tag: display:inline-block;
It makes it so the divs for your text and the divs for your image(s) can line up next to one another. You've gotta put it in the code for all the divs you want to get lined up. Then, you have to adjust width: width: 20%;
You set the width to a percentage instead of a specific pixel width so that the finished thing is fairly mobile friendly. Depending on the picture, they usually break on things smaller than a PC, but that's something you just gotta deal with. d: Anyways. Width to percentages, and make sure you leave like ten percent for padding and margins and whatnot. For example, my widths on my sheet in the clan are 32% for the image and 60% for the text box, with around 8% left for my margins and a decent gap between the image and the box. You can also lay images next to one another, like this:
Code:
[div=width:20%;display:inline-block;][div=background:url(https://bhf.io/data/avatars/l/71/71047.jpg?1483475686); background-size: 100%; background-position: center; height: 150px; border: transparent;][/div][/div][div=width:35%;display:inline-block;margin-left: 4%;margin-right: 4%;][div=background:url(http://i.imgur.com/t2QKl1P.gif); background-size: 130%; background-position: center; height: 150px; border: transparent;][/div][/div][div=width:20%;display:inline-block;][div=background:url(https://68.media.tumblr.com/dce438d80bd104063575bf01fe012b21/tumblr_nvf9hxiKhz1u7gnm9o1_500.gif); background-size: 225%; background-position: 75% 0%; height: 150px; border: transparent;][/div][/div]
which looks like
Just don't press enter between codes and make sure you keep track of how much percentage your stuff is taking up. Does that make sense? And, feel free to PM me if it just isn't working right.[/spoili]