Having issues aligning two column grid on a same row and it’s causing misalignments

I am having some issues with aligning items that are in a two column grid. If you look at this picture, you will notice that 'Example 3' is not aligned with 'Example 4'. I think the issue is that since 'Example 2' does not have a description, 'Example 3' is occupying that empty space on 'Example 2'.

Even if there is no description for any example, 'Example 1' should align with 'Example 2'(row 1). 'Example 3' should align with Example 4'(row 2).

I am not sure what is causing this mis-alignment. Not sure if my bootstrap is wrong or the structure of my code is wrong. Here is my code:

<div class="myTree">
    <div class="col-sm-6 col-md-6">
        @if(link !=null)  // if link is there, then it shoud apply to image and title.
        {
        <a href="@link.URL" title="@link.LinkName" target="@link.TargetWindow">
            <div class="content">
                <div class="treeimagewithLink">
                    <img class="treeimage" alt="@image.GetAttributeValue("AlternateText")" title="@image.GetAttributeValue("AlternateText")" src="images/@image.Value" />
                </div>
                <div class="treeTitle">
                    <h3>@title</h3>
                </div>
            </div>
        </a>
        <div class="treeexcerpt">
            <p>@Html.Raw(Model.GetElementValue("description"))</p>
        </div>
        }
        else{ // if there is no link 
        <div class="imagewithnoLink">
            <img class="treeimage" alt="@image.GetAttributeValue("AlternateText")" title="@image.GetAttributeValue("AlternateText")" src="images/@image.Value" />
        </div>
        <div class="treeTitle">
            <h3>@title</h3>
        </div>
        <div class="treeexcerpt">
            <p>@Html.Raw(Model.GetElementValue("description"))</p>
        </div>
        }
    </div>
</div>


Read more here: https://stackoverflow.com/questions/64950573/having-issues-aligning-two-column-grid-on-a-same-row-and-its-causing-misalignme

Content Attribution

This content was originally published by Myles at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: