<div class="layout">
  <div class="layout__item layout__item--primary">
    <p class="truncate">
      <a href="#">https://www.google.ca/#cr=countryCA&tbs=ctr:countryCA%2Cbkt:b&tbm=bks&q=a+really+long+something+stupid+kinda+crazy+test+search+request
      </a>
    </p>
  </div>
  <div class="layout__item layout__item--secondary">
    <p>Item</p>
  </div>
</div>
<div class="layout">
  <div class="layout__item layout__item--primary">
    <p>Item</p>
  </div>
  <div class="layout__item layout__item--secondary">
    <p>Item</p>
  </div>
</div>
<div class="layout">
  <div class="layout__item layout__item--primary">
    <p>Item</p>
  </div>
  <div class="layout__item layout__item--secondary">
    <p>Item</p>
  </div>
</div>
.layout {
  width:400px;
  display: flex;
  flex-wrap: wrap;
}

.layout__item {
  padding: 20px;
  border: 1px solid #ccc;
}

.layout__item--primary {
  flex: 1 1 100px;
}

.layout__item--secondary {
  flex: 1 1 100px;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.