How do you put two card classes side by side WITHOUT CSS - html

Question

Hi Im relatively new to html and need some help
Im coding my profile on a site where CSS is a premium option so I can only use html
I keep running in to the same problem where I can't display two card classes (both of which I use for an info box on my profile) side by side
I'm always able to get the first one exactly where I want it but the second one gets stuck underneath and I want them aligned horizontally
Any pointers?
It always ends up looking something like this
<div class="container m-3 p-3" style="background-color: black; max-width: 950px; border-radius: 5px;">
<div class="container m-3 p-3" style="background: url('BG_IMG'); background-size: cover; #292929; max-width: 885px; border-radius: 5px;"
<div class="p-2 col-sm-4">
<center><img src="IMG_LINK"max-width: 200px; border-radius: 5px"></center>
<div class="card p-2 my-3 text-center">
<h1 class="m-0"><b>NAME</b></h1>
<p><b>SUBTITLE</b></p>
</div>
<div class="col-sm-8">
<div class="card">
<h class="m-3" style="height: auto; text-indent: 20px;"></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="col">
<div class="p-2 col-sm-4">
<div class= "p-2 card">
<h3 class="m-1 text-center">INTERESTS</h3>
<hr class="w-75 my-1" style="background: light; height: 1px;">
<div class="mx-n1 text-center my-auto">
<p class="m-1">CONTENT</p>
<hr class="w-75 my-2" style="background: light; height: 1px;">
<p class="m-1">CONTENT</p>
<hr class="w-75 my-1" style="background: light; height: 1px;">
<p class="m-1">CONENT</p>
<hr class="w-75 my-1" style="background: light; height: 1px">
<p class="m-1">CONTENT</p>
<hr class="w-75 my-1" style="background: light; height: 1px;">
<p class="m-1">CONTENT</p>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

A couple of things:
A good thing to do in general is to proof read your code thoroughly, especially if something isn't working. It's annoying to do by hand, that's why I'd recommend using a text editor that does it for you. I personally use VS-code with Prettier for formatting, I'd start there if you don't have your own specific preferences. That's how I directly found a dozen syntax errors. Then if you want, you can just copy-paste it wherever after correcting the errors.
I assume you're using Bootstrap, since you're using their class names. HTML in itself has barely any styling possibilities, except for inline-css (like this: style="background-color: #FFFFFF;"). For layout, checkout their grid system.
Like someone already commented, a site that has css as a premium option probably isn't a site you want to be using. But if you have no other alternative, I made a version of this on codeply (using Bootstrap 5, not sure about which version your site uses, they are similar but not identical). I think this is something like what you're trying to achieve. I made some quite heavy changes on the markup, you'll have to fix the more exact layout yourself, I don't know exactly what you're trying to do, and I don't have the pictures.
Edit: here's the code I put on codeply:
<div class="container" style="background-color: black; max-width: 950px; border-radius: 5px;">
<div class="row m-3 p-3"
style="background: url('BG_IMG'); background-size: cover; background-color:#292929; max-width: 885px; border-radius: 5px;">
<div class="col-12">
<div class="card">
<img src="IMG_LINK" class="card-img-top" style: "max-width: 200px; border-radius: 5px">
<h1 class="card-title text-center">NAME</h1>
<p class="card-text fw-bold text-center">SUBTITLE</p>
</div>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="card">
<h3 class="card-title m-3">Title?</h3>
<p class="card-text m-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
</div>
<div class="col-4">
<div class="card">
<h3 class="card-title m-3">INTERESTS</h3>
<ul class="list-group">
<li class="list-group-item">CONTENT</li>
<li class="list-group-item">CONTENT</li>
<li class="list-group-item">CONENT</li>
<li class="list-group-item">CONTENT</li>
<li class="list-group-item">CONTENT</li>
</ul>
</div>
</div>
</div>
</div>