Размещение нескольких div на одной строке с помощью CSS

Я сейчас работаю с Django, и я делаю представление, в котором отображаются несколько объектов из списка. Сейчас каждый из этих объектов находится на отдельной строке. Но я хочу иметь, например, 2 на одной строке, чтобы список был менее длинным на странице.

Вот мой код на данный момент:

html:

{% for plant in plants %}
<div class="plant">
    <img src="{{plant.icon}}">
    <div>
        <label>{{plant.common_name}}</label>
        <input type="number" name="percentage"/>
    </div>
</div>
{% endfor %}

CSS:

.plant_beet_form {
        width: 100%;
        margin: 0 auto;
        font-size: 3rem;
    }
    
.plant div {
    width: 70%;
    margin: 0 auto;
}

.plant input{
    margin: 0 auto;
    width: 100%;
    font-size: 2.5rem;
}

.plant img {
    width: 10rem;
    height: 10rem;
    margin-bottom: 1rem;
}

.plant {
    width: 30%;
    margin: 0 auto;
    margin-bottom: 2rem;
}

Я уже пробовал использовать display:grid и grid-template-rows: 1fr 1fr, но и это не помогло. Есть идеи?

Спасибо

Убедитесь, что вы используете grid-template-columns : 1fr 1fr в родительском div Div, например, если родительский div вашего контента .plant_beet_form, то сделайте следующее.

.plant_beet_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

И после этого стилизуйте ваш .plant класс так, как вам нужно

Думаю, вы можете попробовать следующее:

HTML:

<div class="container">
<div class="plant">
<img src="{{plant.icon}}">
</div>
<div>
    <label>{{plant.common_name}}</label>
    <input type="number" name="percentage"/>
</div>
</div>

CSS: Я добавил следующее:

.container {