This is how the display currently looks:

![How It looks right now](https://i.stack.imgur.com/U9tyH.jpg)

This is how I want it to look:

![How I want it to be](https://i.stack.imgur.com/QbrjH.jpg)

```css
.d1{
  background:#F0F0F0;
  border: 1px solid #A4A4A4;
}

#designs input, #itemz input{
  height:19px;
  font-size: 15px;
}

#designs #fds_image {
  background-size: 190px 221px;
  height: 221px;
  width: 190px;
  overflow:hidden;
}

#designs #fds_image img{
  width: 190px;
}
```

```html
<table id="designs" width="auto" align="center" border="0" bgcolor="#EBEBEB" cellspacing="5">
  <tbody>
    <tr>
      <td class="d1" name="item">
        <div id="fds_image">
          <button class="preview_switch">M</button>
        </div>
        <hr>
        <div class="bottom_bar">
          <button name="preview" data-original="m">Preview</button>
          <br>
          <tbody>
            <td class="d1" name="item">
              <div id="fds_image">
                <button class="preview_switch">M</button>
              </div>
        </div>
        <hr>
        <div class="bottom_bar">
          <button name="preview" data-original="m">Preview</button>
```

I tried to do many things and researched online, but for some reason, it is not working. How can I make the tables display side-by-side, like I've shown?