Help issue with box alignment

[kaninchen]

I've been coding something and these two boxes have me absolutely stuck. I isolated them from their parent because I considered that maybe the flex was messing it up, but the problem persists. On CSS forums and whatnot, I can't find a very useful solution. Firstly, I cannot make them sit side by side WITHOUT using inline-block, which I think is normal, but I'm not sure. And second, what in the world is going on with their alignment? Changing height doesn't really fix it because it's still skewed.

Here's what I do know:
-line-height affects box placement even if contained. why? idk. but, even when the property is removed, they are not aligned.
-when the first box has NO text, the boxes are aligned.
-changing font size does not help, instead makes it worse?

“Basically what we have here is a dreamer. Somebody out of touch with reality.”

Just looking for some guidance on this, because I run into this issue a lot and I want to know what to avoid!
code below:

Spoiler

[border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block;][border=0; height:150px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border]

 

[xayah.]

Hi! I'm really poor at bbcode but a simple fix was just to add float:left to the first box. your boxes ended up lining up perfectly. from my poor understanding, float causes text & boxes to wrap around a picture (or other box). since you have a picture box (with or without words), you'll need to add float:left/right to place it on either side and not have the other elements disturb its positioning. i put the code below with the float for you in a spoiler. also here's an example that's clearer and has a diagram of what i'm talking about: click here!

Spoiler: code fixed!

[border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block; float: left;][border=0; height:130px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px;][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border]

“Basically what we have here is a dreamer. Somebody out of touch with reality.”

 

[Alteras]

“Basically what we have here is a dreamer. Somebody out of touch with reality.”

I wrapped them in a flexbox parent. The only thing I can think of is that because it's set to display: inline-block the second div is trying to align with the ending text of the first div.

[border=unset; padding: unset; display: flex; flex-flow: row wrap;][border=1px solid tan; padding:5px; background:URL('https://www.clubdesfemmes.com/wp-content/uploads/2020/09/5281b72339e1dc5927b74384986f9d42.jpg'); background-size:cover; height:150px; max-width:230px; display:inline-block;][border=0; height:150px; max-width:230px; line-height:19px; letter-spacing:2px; text-transform:uppercase; color:wheat; font-size:18px][font='Abril Fatface']“Basically what we have here is a dreamer. Somebody out of touch with reality.”[/font][/border][/border][border=1px solid tan; padding:5px; height:150px;text-align:justify; width:300px; display:inline-block;][/border][/border]