The below is my HTML. I have a total of 3 cards in three columns and want only the left and right side to be transparent. I have tried setting border to white/transparent but no success.[![what I am getting currently](https://i.stack.imgur.com/Dvyis.png)](https://i.stack.imgur.com/Dvyis.png)
. What I want[![what I want](https://i.stack.imgur.com/IFn7U.png)](https://i.stack.imgur.com/IFn7U.png)

```css
.user-panel .card {
  margin-top: 1px;
}

.user-panel {
  min-height: 170px;
}

.user-panel,
.user-panel .card {
  display: flex;
  height: 100%;
}

.user-panel,
.user-panel .card .item {
  height: inherit;
  text-align: center;
}

.user-panel .user-profile-details .item {
  background-color: #edfaff;
}
```

```html
<div class="row no-padding user-panel">
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div class="row"><i class="user-profile-icon"></i> </div>
              <div>{{data}}</div>
              <div>(015106)</div>
              </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
           </div>
         </span>
      </div>
    </div>
  </div>
  <div class="col col-33 no-padding">
    <div class="card  no-padding">
      <div class="item item-text-wrap">
        <span>
          <div>
            <div>MY ACCESSES</div>
          </div>
         </span>
      </div>
    </div>
  </div>
</div>
```