I am unable to display in one row. I will be looping the images dynamically. So if there are 4 to 5 images, then it should come in one row. But if there are more than 5 images or you can say 9, then it should come in next rows. In the below code, I am using HTML and CSS but unable to get in same row.

```css
#umar {
  display: inline;
  width: 100%;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 20%;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 2px 16px;
  margin-bottom: 10px;
}
```

```html
<h2>Card</h2>

<div id="umar">
  <div class="card">
    <img src="images/img.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

  <div class="card">
    <img src="images/img1.jpg" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</div>
```