JSFiddle - React, Tailwind, and code Playground

HTML

<div class="Card">
  <div class="Card-FullNameLabel">ÀÇĤjgpfhjklbĜiEstosTreMalfaciÀÇĤjgpfhjklbĜiEstosTreMalfaci</div>
  <div class="Card-OrganizationNameLabel">ÀÇĤjgpfhjklbĜiEstosTreMalfaciÀÇĤjgpfhjklbĜiEstosTreMalfaci</div>
</div>

CSS

body {
  padding: 12px;
}

* {
  line-height: 1;
  font-family: Arial, sans-serif;
}

.Card {

  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: 240px;
  height: 320px;
  padding: 6px 12px 12px;
  
  background: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.Card-FullNameLabel,
.Card-OrganizationNameLabel {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* Shows all ascenders and descenders */
  line-height: 1.5;
}

.Card-FullNameLabel {
  font-size: 16px;
  color: #707070;

  /* Compensates for line-height */
  margin: -4px 0;
}

.Card-OrganizationNameLabel {
  font-size: 12px;
  color: #A2A2A2;

  /* Compensates for line-height */
  margin: -3px 0;
}

.Card-FullNameLabel + .Card-OrganizationNameLabel {
  /* 6px visually (minus 3px) */
  margin-top: 3px;
}