Semantic UI sandbox

horizontal card

HTML

<link rel="stylesheet" href="https://semantic-ui.com/dist/semantic.css">
<script src="https://semantic-ui.com/dist/semantic.js"></script>
<div class="ui basic segment">


  <div class="ui card horizontal">
    
    <div class="content">
    
     <i class="circle green icon"></i>Libellé Catégorie SIGMA (360)
      <div class="meta">
        <span class="date ">est égal à</span>
      </div>
      <div class="description">
       <b>Yaourts</b> ou <b>Bio</b> ou <b>Autres</b> 
      </div>
    </div>
  </div>
</div>

CSS

.ui.card.horizontal {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  min-width: 400px;
  width: 500;
}

.ui.card.horizontal>.image {
  border-radius: 0;
  width: 150px;
}

.ui.card.horizontal>.image>img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  justify-content: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

JavaScript

// Add javascript here