<div id="mainWrapper">
  <div id="cardsWrapper">
    
    <div class="card">
      <div class="image first">
        <div class="screen"></div>
        <div class="text"></div>
      </div>
    </div>
    
    <div class="card">
      <div class="image second">
        <div class="screen"></div>
        <div class="text"></div>
      </div>
    </div>
    
  </div>  
</div>

#mainWrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}

#cardsWrapper{
  display: flex;
  justify-content: space-between;
  width: 700px;
  
}

.card{
  width: 300px;
  height: 175px;
  perspective: 500px;
  position: relative;
}

.image{
  width: 100%;
  height: 100%;
  transform: rotateX(30deg);
  background-color: red;
}