Html – How to display card picture to the right side of the text?

I’ve started writing my first website project using django (recipe storage website). I’ve imported a template for the whole project and it came with its own stylesheet and other bits and bobs. Now, I am writing a page where I want to display all the recipes that are in the database. For that, I also borrowed a recipe display card template (it came with its own HTML and CSS).

So, I looked up how to merge them and for the most part it works and displays properly. However, whatever I do, for the life of me I can’t seem to make the image of the card to display to the right of the text (within the card), even though I’ve pasted my stylesheet and the cards style and HTML into jsfiddle.net and it displays perfectly. It only ever displays below the text.

I assume it’s not a conflict with my existing stylesheet, because none of the class names in the imported card stylesheet are the same as ones in my existing one, but I’ve been banging my head at this problem for like 8 hours now, and I can’t seem to get it to work. I feel like I am missing something simple, but can’t quite find what’s wrong. Any help appreciated.

My files:

1. all_recipes.html (with the template’s HTML applied

{% extends "base.html" %}
{% load static %}

{% block "CardHead" %}
<link rel="stylesheet" type="text/css" href="{% static 'css/recipe_card.css' %}">
{% endblock %}


{% block "AllRecipes" %}

{% if recipes %}
<div>
    {% for recipe in recipes %}
    <div class="card-container">
        <div class="card u-clearfix">
            <div class="card-body">
                <span class="card-number card-circle subtle">01</span>
                <span class="card-author subtle">John Smith</span>
                <h2 class="card-title">New Brunch Recipe</h2>
                <span class="card-description subtle">These last few weeks I have been working hard on a new brunch recipe for you all.</span>
                <div class="card-read">Read</div>
                <span class="card-tag card-circle subtle">C</span>
            </div>
            <img src="https://s15.postimg.cc/temvv7u4r/recipe.jpg" alt="" class="card-media"/>
        </div>
        <div class="card-shadow"></div>
    </div>
</div>


{% endfor %}
{% else %}
<p>No recipes found.</p>
{% endif %}
{% endblock %}

2. Templates CSS:

*, *:before, *:after {
  box-sizing: inherit;
}

.u-clearfix:before,
.u-clearfix:after {
  content: " ";
  display: table;
}

.u-clearfix:after {
  clear: both;
}

.u-clearfix {
  *zoom: 1;
}

.subtle {
  color: #aaa;
}

.card-container {
  margin: 25px auto 0;
  position: relative;
  width: 692px;
}

.card {
  background-color: #fff;
  padding: 30px;
  position: relative;
  box-shadow: 0 0 5px rgba(75, 75, 75, .07);
  z-index: 1;
}

.card-body {
  display: inline-block;
  float: left;
  width: 310px;
}

.card-number {
  margin-top: 15px;
}

.card-circle {
  border: 1px solid #aaa;
  border-radius: 50%;
  display: inline-block;
  line-height: 22px;
  font-size: 12px;
  height: 25px;
  text-align: center;
  width: 25px;
}

.card-author {
  display: block;
  font-size: 12px;
  letter-spacing: .5px;
  margin: 15px 0 0;
  text-transform: uppercase;
}

.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 60px;
  margin: 10px 0;
}

.card-description {
  display: inline-block;
  font-weight: 300;
  line-height: 22px;
  margin: 10px 0;
}

.card-read {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 6px;
  margin: 5px 0 20px;
  position: relative;
  text-align: right;
  text-transform: uppercase;
}

.card-read:after {
  background-color: #b8bddd;
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  top: 9px;
  width: 75%;
}

.card-tag {
  float: right;
  margin: 5px 0 0;
}

.card-media {
  float: right;
}

.card-shadow {
  background-color: #fff;
  box-shadow: 0 2px 25px 2px rgba(0, 0, 0, 1), 0 2px 50px 2px rgba(0, 0, 0, 1), 0 0 100px 3px rgba(0, 0, 0, .25);
  height: 1px;
  margin: -1px auto 0;
  width: 80%;
  z-index: -1;
}

The rest of the code base is too extensive and multi-file to share here, so I’ll just drop a link to the repository –> Demo website

Only been coding for something like 3 months, so code is a mess, don’t poke at it too much 🙂

Expected: Card image is displayed on the right side of the card. Text of the card – on the left.

Result: Image is displayed below the text, at the bottom of the card. Text is displayed on the left.

Tried:

to simply paste the template CSS code into my existing stylesheet (since there are no duplicate class names). Didn’t work.

Tried to have the template CSS as a separate CSS file. Didn’t work.

Tried tweaking the template CSS code. Didn’t work.

Tried moving around the div’s in the HTML. Didn’t work.

Tried encapsulating the template CSS into a single custom class and then using that (not sure if that makes sense) but that didn’t work either.

Asking Chat GPT. Didn’t work.

Asking my teacher. Didn’t work.