The easiest answer: assuming you don't have plans to add more and don't need to worry about there being so many adopts that they won't all fit on one line, then the simplest solution is adding a display: inline-block to both .fawnspark and .specklescar. All divs render using display: block by default, which stacks on top of each other like in your screenshot.
[break][break]
The slightly more complicated one: if you will be adding more adopts, I would instead add display: flex; justify-content: space-around; align-items: center to .adopts, which will allow the items within to sit in a row and wrap additional cats to the next line if they can't fit on one row (display: flex); center them horizontally within the width of the blue box (justify-content: space-around); center them vertically within the height of the blue box (align-items: center). Flexbox is a super versatile layout type that I won't get into, but if you are interested in reading more about it, I recommend this csstricks article about 'em.
[break][break]
Going beyond your original question though, I might suggest a couple things that will make things easier for you in the long run, especially if you do intend to add more.
[break][break]
First up, for a layout involving any kind of nested divs (which is most of them to be honest), I highly recommend always including a [ nospaces] at the start of your post—it'll allow you to have line breaks wherever you please without it actually impacting the final post. That way you can format the code itself in a more scannable way instead of having to keep it in one dense paragraph the way you have now.
[break][break]
Second, right now you have your newclass tags interspersed between your div tags. For best practice, and for ease of keeping track of how many open divs you have, I'd recommend keeping your structural tags separate from style tags by moving all the newclasses to the bottom of the post because...
[break][break]
Third, once you do that, we come to the biggest quality of life improvement. Currently, even though you have unique classes for every single div, with the exception of the background image for each adoptee, all the classes are repeating the same width, same height, same position, same hovers, etc. The cool thing about classes though is that multiple divs can reuse the same class, and one div can also use multiple classes, meaning you can write out the styles once, and then just apply that class to everything that's supposed to look/behave the same.

[break][break]
For example, you'd go from:
[break][break]
[div][ attr="class","fawnspark]fawnspark says hi[/div]
[newclass=.fawnspark]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; padding: 10px[/newclass]

[div][ attr="class","specklescar]specklescar says hi[/div]
[newclass=.specklescar]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; padding: 10px[/newclass]

[break][break]
To
[break][break]
[div][ attr="class","catto]fawnspark says hi[/div]

[div][ attr="class","catto]specklescar says hi[/div]

[newclass=.catto]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; padding: 10px[/newclass]

[break][break]That way, if you ever decide you want to make all the pictures 500px wide, rather than going in to change it in five different places, you can change it in one place and it'll affect all of them. Then, for something like the background-image, which will always be different from div to div, you can set that inside the div tag itself using div style="background-image...". When combined with a class, it'll be written out like [ div style="background-image: X"][ attr="class","catto"] [ /div]

[break][break]Put all of the above together and you get...
[break][break]
[nospaces][div][attr="class","adopts"]

[div][attr="class","cat"]
[div style="background-image:url(https://i.imgur.com/1VzXxUO.jpg?1)"][attr="class","catimage"] [/div]
[div][ attr="class","cattext"]Fawnspark. Sister. Littermate. Has a come-and-go temper, by which I mean it's as easy to rile her up as it is to calm her down.[/div]
[/div]

[div][attr="class","cat"]
[div style="background-image:url(https://i.imgur.com/O0EWidp.jpg?1);"][attr="class","catimage"] [/div]
[div][*attr="class","cattext"]Specklescar. Brother. Littermate. As competitive and rowdy as his siblings, but maybe nearly dying has tempered him. Got his scars when the trio went to fight a fox as apprentices.[/div]
[/div]

[/div]
[newclass=.adopts]background-color:#002b5c;width:500px;height:350px; display: flex; justify-content: space-around; align-items: center[/newclass]
[newclass=.cat]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; [/newclass]
[newclass=.cattext]opacity: 0; position: relative;width:180px; padding: 10px [/newclass]
[newclass=.catimage]width:100%; height:100%; position: absolute; top: 0; left: 0; [/newclass]
[newclass= .cat:hover .cattext]opacity: 1;[/newclass]
[newclass= .cat:hover .catimage]opacity:.5;[/newclass]

[break][break]And what that looks like:[break][break]

[nospaces]

[attr="class","adopts"]

[attr="class","cat"]

[attr="class","catimage"]

[attr="class","cattext"]Fawnspark. Sister. Littermate. Has a come-and-go temper, by which I mean it's as easy to rile her up as it is to calm her down.

[attr="class","cat"]

[attr="class","catimage"]

[attr="class","cattext"]Specklescar. Brother. Littermate. As competitive and rowdy as his siblings, but maybe nearly dying has tempered him. Got his scars when the trio went to fight a fox as apprentices.

[newclass=.adopts]background-color:#002b5c;width:500px;height:350px; display: flex; justify-content: space-around; align-items: center[/newclass]
[newclass=.cat]width:200px; height:300px; color:black; position: relative; overflow: hidden; color: white; [/newclass]
[newclass=.cattext]opacity: 0; position: relative;width:180px; padding: 10px [/newclass]
[newclass=.catimage]width:100%; height:100%; position: absolute; top: 0; left: 0; [/newclass]
[newclass= .cat:hover .cattext]opacity: 1;[/newclass]
[newclass= .cat:hover .catimage]opacity:.5;[/newclass]