JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Overzicht">
  <div class="item with-image overzicht-item">
    <h3><!--48--><a href="48" title="#">Motor Amsterdam</a></h3>
    <div class="distance"><span class="distance-order">8,54 </span>km</div>
    <div class="item-txt">
      <p>Address: Stadionweg 279- 283, Amsterdam</p>
    </div>
    <div class="item-link"><a href="48" title="#">Bekijk details</a></div>
  </div>
  <div class="item with-image overzicht-item">
    <h3><!--42--><a href="42" title="#">101 motoren B.V.</a></h3>
    <div class="distance"><span class="distance-order">7,89 </span>km</div>
    <div class="item-txt">
      <p>Address: Coenhavenweg 36, Amsterdam</p>
    </div>
    <div class="item-link"><a href="42" title="#">Bekijk details</a></div>
  </div>

  <div class="item with-image overzicht-item">
    <h3><!--50--><a href="50" title="#">MotoXL</a></h3>
    <div class="distance"><span class="distance-order">11,1 </span>km</div>
    <div class="item-txt">
      <p>Address: Bouvigne 4-1hg, Amsterdam</p>
    </div>
    <div class="item-link"><a href="50" title="#">Bekijk details</a></div>
  </div>
  <div class="item with-image overzicht-item">
    <h3><!--45--><a href="45" title="#">Gilex Motoren B.V.</a></h3>
    <div class="distance"><span class="distance-order">8,74 </span>km</div>
    <div class="item-txt">
      <p>Address: Marnixstraat 186, Amsterdam</p>
    </div>
    <div class="item-link"><a href="45" title="#">Bekijk details</a></div>
  </div>
  <div class="item with-image overzicht-item">
    <h3><!--44--><a href="44" title="#">De Kerswerf Motor B.V.</a></h3>
    <div class="distance"><span class="distance-order">3,23 </span>km</div>
    <div class="item-txt">
      <p>Address: Jarmuiden 43, Amsterdam</p>
    </div>
    <div class="item-link"><a href="44" title="#">Bekijk details</a></div>
  </div>
  <div class="item with-image overzicht-item">
    <h3><!--43--><a href="43" title="#">Alle Motor Onderdelen Olivier Klesser</a></h3>
    <div class="distance"><span...

CSS

.item{ float:left; width:100%; margin:0 0 3px 0; background: rgba(25, 25, 25, 0.9); padding:10px; color:#ffffff;}

.item A{ color:#FFFFFF; text-decoration:none;}
.item.with-image{} 
.item.with-image .image{ float:left; width:15%;} 
.item.with-image .image IMG{ max-width:80%; max-height:100px; margin:0 auto;}
.item.with-image H3{ width:60%;}
.item.with-image .item-txt{ float:left; width:85%; border:0px;}
.item.with-image .item-txt P{ margin:0px; padding:0px;}
.item.with-image .item-link{ float: right; width:85%; text-align:right; border:0px;}
 
.item H3{ font-size:14px; line-height:14px; margin:0px; padding:0px; width:80%; float:left;}
.item .distance{ float:right; width:20%; border:0px; text-align:right;}
.item .item-txt{ float:left; width:100%; border:0px;}
.item .item-link{ float:left; width:100%; text-align:right; border:0px;}

JavaScript

jQuery("#Overzicht > div").sort(function(a, b) {
		var upA = jQuery('.distance-order', a).text().toUpperCase();
		var upB = jQuery('.distance-order', b).text().toUpperCase();
		return upA < upB;
	}).appendTo('#Overzicht');