how to show my post like Last image with below code?
Tags: javascript, css, html, blogspot
Published: 2023-04-07 15:10:26

I provide here some CSS,html and JavaScript code, what i using in my 
Blogspot site. this code show my post like 1st image style. 

now I want to show my post like 2nd image style. 

So How to write or modify my CSS and JavaScript code to show post like 2nd image?

```
<style>
    label-posts-container .label-post img {
    height: 50px;
    object-fit: cover;
    width: 100%;
    display: flex;
    }

    .label-posts-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    align-items: center;
    }
    .label-posts-container .label-post {
    background: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.3);
    }

    .label-posts-container .thumb-container {
    flex: 0.75;
    width: 100%;
    }

    .label-posts-container .text-content {
    flex: 2;
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    }
    .label-posts-container .post-title-container {
    text-decoration: none;
    }
    .label-posts-container .post-title-container:hover {
    text-decoration: underline;
    }

    .label-posts-container .post-title {
    margin: 0;
    font-size: 15px;
    margin-bottom: 5px;
    color: #000;
    line-height: 1.2;
    }
    </style
```

```
<div class='label-posts-container national'>Posts related to National:</div>
```

```
<script>   
    const National = document.querySelector(".national");
         
    const populateLabelPosts = (data, container) => {
    data.forEach(post => {
    const thumbContainer = document.createElement('a');
    thumbContainer.href = post.link[post.link.length - 1].href;
    thumbContainer.classList.add('thumb-container');
        
    const thumbnail = document.createElement('img');
    thumbnail.src = post.media$thumbnail.url.replace('/s72', '/s300');
        
    thumbContainer.appendChild(thumbnail);
        
    const textContent = document.createElement('div');
    textContent.classList.add('text-content');
        
    const postTitleContainer = document.createElement('a');
    postTitleContainer.href = post.link[post.link.length - 1].href;
    postTitleContainer.classList.add('post-title-container');	
        
    const title = document.createElement('h3');
    title.classList.add('post-title');
    title.innerHTML = post.title.$t;
        
    postTitleContainer.appendChild(title);
            
    textContent.appendChild(postTitleContainer);
           
    const labelPost = document.createElement('div');
    labelPost.classList.add('label-post');
            
    labelPost.appendChild(thumbContainer);
    labelPost.appendChild(textContent);
        
    container.appendChild(labelPost);
    });
        
    }
        
    const displayNational = (posts) => {
    populateLabelPosts(posts.feed.entry, National);
    }
    </script>   
    <script src='https://www.sebahotnews.org/feeds/posts/summary/-/জাতীয়?max-results=5&amp;alt=json-in-script&amp;callback=displayNational'></script>
```

Using above this code showing like this Image 1 style.
![image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csahzyxouitm3rbbk6or.jpg)

But i want to show my post like below Image 2 using above code. so how to modify my code?

![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16pc2q2e10di7xri66yk.jpg)