<div class="cases">
  <div class="case case-flex">
    <a href="" class="item">
      <p class="photo"><img src="https://placehold.jp/150x150.png" alt=""></p>
      <p class="text">flexにはmarginが効く</p>
    </a>

    <a href="" class="item item-new">
      <p class="photo"><img src="https://placehold.jp/150x150.png" alt=""></p>
      <p class="text">flexでNEWマークをつける</p>
    </a>
  </div>

  <div class="case case-tablecell">
    <a href="" class="item">
      <p class="photo"><img src="https://placehold.jp/150x150.png" alt=""></p>
      <p class="text">table-cell</p>
    </a>

    <a href="" class="item item-new">
      <p class="photo"><img src="https://placehold.jp/150x150.png" alt=""></p>
      <p class="text">table-cellでNEWマークをつける</p>
    </a>
  </div>
</div>

<table>
  <tr>
    <th><img src="https://placehold.jp/150x150.png" alt=""></th>
    <td>tableでNEWマークをつける</td>
  </tr>
</table>
* {
  box-sizing: border-box;
}

.cases {
  overflow: hidden;
  .case {
    width: 250px;
    
    .item {
      position: relative;
      margin: 10px 0;
      color: #333;
      text-decoration: none;
      border: 3px solid #333;
      transition: opacity .3s ease-in;
      &:hover {
        opacity: 0.8;
      }
      
      &-new {
        &:after {
          content: "NEW";
          position: absolute;
          top: 0;
          right: 0;
          color: red;
          font-weight: bold;
        }
      }
    }
    
    .photo {
      margin: 0 10px 0 0;
      width: 100px;
      height: 100px;
      text-align: center;
      background: red;
      img {
        width: 100%;
        height: auto;
        vertical-align: middle;
      }
    }
    .text {
      margin: 0;
      padding: 0 10px;
      background: green;
      
        color: #fff;
    }
    
    &-flex {
      .item {
        display: flex;
		    align-items: stretch;
      }
      
      .text {
        display: flex;
        align-items: center;
        flex: 1;
      }
    }
    
    &-tablecell {
      .item {
        display: table;
        width: 100%;
      }
      
      p {
        display: table-cell;
        vertical-align: middle;
      }
    }
    
  }
}

table {
  width: 250px;
  border: 3px solid #333;
  border-spacing: 0;
  th {
    padding: 0;
    width: 100px;
    vertical-align: middle;
    img {
      margin: 0;
      width: 100%;
      height: auto;
      vertical-align: bottom;
    }
  }
  
  td {
    position: relative;
    padding: 10px;
    color: #fff;
    background: green;
    &:after {
      content: "NEW";
      position: absolute;
      top: 0;
      right: 0;
      color: red;
      font-weight: bold;
    }
  }
}
View Compiled
Rerun