<div class="wrapper-box">
  <a class="box-img" href="#"><img src="http://placehold.jp/160x120.png" alt="" width="160" height="120"></a>
  <div class="box-info">
    <a class="box-title" href="#">Title Text</a>
    <div class="box-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="box-linkbox">
      <a class="box-button box-color1" href="#">buttom</a>
    </div>
  </div>
</div>

<div class="wrapper-box">
  <a class="box-img" href="#"><img src="http://placehold.jp/160x120.png" alt=""></a>
  <div class="box-info">
    <a class="box-title" href="#">Title Text</a>
    <div class="box-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="box-linkbox">
      <a class="box-button box-color1" href="#">buttom1</a>
      <a class="box-button box-color2" href="#">buttom2</a>
    </div>
  </div>
</div>
.wrapper-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1.5em;
    padding: 8px;
    overflow: hidden;
}
.box-img {
    float: left;
    padding-right: 10px;
    width: 40%;
    max-width: 160px;
}
.box-img img {
    width: 100%;
    height: auto;
}
.box-title {
    display: block;
    font-size: 120%;
    overflow: hidden;
}
.box-desc {
    clear: both;
    font-size: 90%;
    overflow: hidden;
}
.box-linkbox {
    display: flex;
    border-spacing: 8px 0;
    justify-content: center;
    padding: 8px 0 0;
    width: 100%;
}
.box-button {
    text-align: center;
    border-radius: 4px;
    padding: 8px 0;
    color: #fff;
    margin: 0 10px 0 0;
    text-decoration: none;
    width: 100%;
    max-width: 320px;
}
.box-button:last-child {
    margin: 0;
}
.box-button:hover {
    opacity: 0.5;
}
.box-color1{
    background: #f90;
}
.box-color2 {
    background: #f00;
}
@media (min-width: 415px) {
  .box-desc {
    clear: none;
  }
 }
@media (min-width: 569px) {
  .box-info {
    overflow: hidden;
  }
  .box-linkbox {
    justify-content: flex-start;
    max-width: 480px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.