Mansory Card layout in HTML and CSS

css file

.masonry-horizontal {
    display: flex;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.masonry-image {
    width: 30%;
    height: 100%;
    flex-shrink: 0;
}

.masonry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.masonry-content {
    width: 70%;
    padding: 20px;
    box-sizing: border-box;
}

.masonry-title {
    margin-top: 0;
    font-size: 20px;
    color: #333;
}

.fields {
    margin-bottom: 20px;
}

.field-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between fields */
    margin-bottom: 10px;
}

.field {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    width: calc(33.33% - 20px); /* 3 columns per row */
    border-radius: 4px;
}

.buttons {
    display: flex;
    gap: 10px;
}

.buttons button {
    border: none;
    padding: 10px 20px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.buttons .edit {
    background-color: #007bff;
}

.buttons .delete {
    background-color: #dc3545;
}

.buttons .publish {
    background-color: #28a745;
}

@media (max-width: 768px) {
    .masonry-horizontal {
        flex-direction: column;
    }

    .masonry-image {
        width: 100%;
        height: auto; /* Adjust height for mobile */
    }

    .masonry-content {
        width: 100%;
        padding: 10px; /* Adjust padding for mobile */
    }

    .field-container {
        flex-direction: column;
        gap: 10px; /* Adjust space between fields in a single column */
    }

    .field {
        width: 100%; /* Full width for single-column layout */
    }

    .buttons {
        flex-direction: column;
        gap: 5px;
    }
}

html file

<div class="masonry-horizontal">
    <div class="masonry-image">
        <img src="https://vipprops.ae/wp-content/uploads/jet-form-builder/2172fde49301047270b2897085e4319d/2024/09/Ocean-terrace.jpg" alt="Ocean Terrace">
    </div>
    <div class="masonry-content">
        <h3 class="masonry-title">Hazrat Bilal Timber/Twing Card Layout 01 with 3 fields in row</h3>
        <div class="fields">
            <div class="field-container">
                <div class="field">Field 1: Value</div>
                <div class="field">Field 2: Value</div>
                <div class="field">Field 3: Value</div>
            </div>
            <div class="field-container">
                <div class="field">Field 4: Value</div>
                <div class="field">Field 5: Value</div>
                <div class="field">Field 6: Value</div>
            </div>
            <div class="field-container">
                <div class="field">Field 7: Value</div>
                <div class="field">Field 8: Value</div>
                <div class="field">Field 9: Value</div>
            </div>
            <div class="field-container">
                <div class="field">Field 10: Value</div>
                <div class="field">Field 11: Value</div>
                <div class="field">Field 12: Value</div>
            </div>
            <div class="field-container">
                <div class="field">Field 13: Value</div>
                <div class="field">Field 14: Value</div>
                <div class="field">Field 15: Value</div>
            </div>
        </div>
        <div class="buttons">
			<button class="publish">View Details</button>
            <button class="edit">Edit</button>
            <button class="delete">Delete</button>
        </div>
    </div>
</div>