How to adjust the css div table so that a multiline text fits nicely?

Question

I have a div as a fixed sized container. In there is a table, built using div's.

See here at JSFiddle

@font-face {
  font-family: "Roboto";
  src: url('Roboto-Medium.woff2') format('woff2'), url('Roboto-Medium.woff') format('woff');
  font-weight: 500
}

#absoluteTable {
  font-family: Roboto;
  font-size: 32px;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  color: #000;
  background-color: f0f0f0;
  line-height: 38px;
  letter-spacing: normal;
  text-shadow: none;
  position: absolute;
  top: 100px;
  left: 274px;
  width: 685px;
  height: 500px;
  border: 1px solid #ffAD21;
}

#absoluteTable2 {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 500px;
  border: 5px solid #ff0000;
}

#absoluteTable p {}

#para1 {
  background-color: #b8c8d2;
  border: 1px solid #00ff00;
  text-align: center;
  color: red;
  height: =20px;
  font-size: 14px;
}

div.priceTable {
  table-layout: fixed;
  width: 685px;
  text-align: left;
  border-collapse: collapse;
}

.divTable.priceTable .divTableCellDescr,
.divTable.priceTable .divTableCellName,
.divTable.priceTable .divTableCellPrice {
  /*border: 1px solid #AAAAAA;*/
  /*display: table-cell;*/
}

.divTable.priceTable .divTableBody .divTableCellName {
  font-size: 16px;
  padding: 8px 8px 2px 2px;
  color: #f00;
  text-overflow: ellipsis;
}

.divTable.priceTable .divTableBody .divTableCellDescr {
  font-size: 12px;
  padding: 1px 9px 2px 35px;
  color: #333;
}

.divTable.priceTable .divTableBody .divTableCellPrice {
  font-size: 18px;
  padding: 1px 2px 1px 15px;
  vertical-align: bottom;
  color: #333;
  width: 55px;
  display: table-cell;
}

.divTable {
  display: table;
}

.divTableRow {
  display: table-row;
  /* overflow: auto; */
}

.divTableBody {
  display: table-row-group;
}

<div class="divTable priceTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCellName">cell1_1</div>
      <div class="divTableCellDescr">cell2_1</div>
      <div class="divTableCellPrice">cell3_1</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellName">cell1_2</div>
      <div class="divTableCellDescr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. </div>
      <div class="divTableCellPrice">€234</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellName">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim,</div>
      <div class="divTableCellDescr"><strong>cell2_3</strong></div>
      <div class="divTableCellPrice">€0.13</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCellName">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim vitae.</div>
      <div class="divTableCellDescr">Lorem ipsum dolor sit amet, consectetur ad</div>
      <div class="divTableCellPrice">cell3_4</div>
    </div>
  </div>
</div>

I do have the following issue's:

Solved 1. If the text from CelX_1 ( column 1 ) is too long, I don't see the ellipses, the remainder of the text moves over to a new line. It should be shortened with the "..." and just one line height Solved

Solved 2. The second table field/column may be as 3-4 lines high as it's needed, but the lines should be closer together. Too much padding? If I make them zero it still looks terrible. How can I fix that, so the lines are closer to each other? Solved

3. In my CSS code, I have the font-face there but I can't get it to work with the different table cell's.

Also, the resulting layout is what I need, but is this the right way? The code will be compacted and with

$( init );

function init() {
$('#absoluteTable p').replaceWith( "My Code ....

BTW, is there a way where I don't need to remove the spaces from the replacement code when using replace with?

Here is a sample to show what goes wrong