I am experiencing an issue with the alignment of post cards in the front end of my HTML. When I add multiple posts, the size and alignment of the cards become irregular; some are bigger while others are smaller. How can I ensure that each post card is the same size?
{
% for post in posts %}
<div class="col-lg-9">
<!-- ROW -->
<div class="row ">
<div class="col-12 mb-2">
<div id = "clicked-post" class="card shadow-sm">
<div class="card-body">
<div class="card-title">
<h5>{{ post.title }} <br> Posted by: {{ post.created_by }}         & {% if post.created_by == user %}<a href="{% url 'delete_post' post_id=post.id %}">Delete</a> {% endif %} </h5>
<h6>Posted at: {{post.created_at}}[UTC 0]</h6>
</div>
<div class="card-main">
{{post.description}}
</div>
<div class="card-body">
<form action="{% url 'create_comment' post.pk %}" method="post">
<div class="input-group">
{% csrf_token %}
{{ comment_form.comment_text|attr:"class:form-control rounded-pill"|attr:"placeholder:Add a class comment" }}
<div class="input-group-append">
<button class=" btn btn-circle" type="submit" id="button-addon2"><i class="fas fa-angle-double-right"></i>Submit</button>
</div>
</div>
</form>
</div>
<div class="card-body">
{% for comment in contents %}
{% if comment.post == post %}
<div class="d-flex flex-row">
<p class='ml-2'><strong>{{ comment.user }}</strong>: {{ comment.comment_text}}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}