JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">




<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>



<div class="container">

   <div class="stern">      
                          <span class="fa fa-star"></span>
                          <span class="fa fa-star"></span>
                          <span class="fa fa-star"></span>
                          <span class="fa fa-star"></span>
                          <span class="fa fa-star"></span> 
      </div>
      <div class="card">
    
    <div class="card-body">
      <p class="card-title">Rucksack aus Hanf Gelbe mit Zwei Riemen</p>
      <p class="card-preis">Preis 40 &euro;</p>
      <div class="number-input ">
        <div class="label">Stück: </div>
        <div class="input-group quantity">
          <div class="input-group-prepend">
            <button class="btn btn-default btn-minus">
              <i class="fa fa-minus"></i>
            </button> 
          </div>
          <input class="form-control quantity" min="0" name="quantity" value="1" type="number">
         ...

CSS

#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}



#gallery_01{
    position: relative;
    float:left;
    display: table;
    line-height: 0;
    content: '';
    margin-top: 1%;
   background-color: #a6a6a6;
}

#zoom_03 { width: 100%; }

.kleine-beschreibung {

  background-color:  #b3b3b3;
  margin-top: 1%;
  padding: 2%;
  width: 40%;
  float: right;
  color: white;
  text-shadow: 2px 2px 4px #000000;
  box-shadow: 10px 10px 15px silver;
}

.stern { margin-top: 11%; }


.fenster-beschreibung { width: 52%; margin-top: 5%; }


.beschreibung-tittel {  background-color: #e6e6e6; width: 25%; padding: 3%;    border: 1px solid #b3b3b3; border-bottom: none; margin-bottom: 0.003%; font-weight: bold; box-shadow: 10px 10px 15px silver; }



.beschreibung { 	background-color: #e6e6e6; width: 100%; padding: 2%; border: 1px solid #b3b3b3; box-shadow: 10px 10px 15px silver;}








#tittel-text {padding: 1.5%; width:100%;text-align:left;border-bottom:1px hidden; background-color:  #d7a8a8;}

#closse-text {  color: #f2f2f2; padding: 0.3%;  cursor: pointer; float: right;}




.card {

  float: right;
    width: 45%;
    background-color:  #cccccc;
    padding-right: 10%;
    padding-bottom: 0.5%; 
   
    margin-left: 3%;
    margin-top: 11%;
    padding-top: 1%;
    z-index: 1;
}

.card-title { width: 100%;  font-weight: bold;  text-align: right;}


.card-preis {
  font-size: 1.5rem;
  
  text-align: right;
 
}


.number-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
}

.label {
    font-size: 1rem;
   
    font-weight: bold; 
    margin-left: 9rem;
    
}

.input-group {
    width: 140px;
}
.form-control {
    text-align: left;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

    /* custom primary buttons */
    
.btn-primary {
        color: #212529;
        background-color: #7cc;
        border-color: #5bc2c2;
        
       ...

JavaScript

function layer_show_3(event)
	{
		event.preventDefault();
            /* Ponemos los atributos de posicion a la capa transparente del fondo */
		$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
		
		/* Buscamos la posicion superior de la capa que aparece centrada.
		   La anchura y la posicion centrada se establece en el estilo */
		var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
		if(posTop<0)
			posTop=0;
		$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
		/* Indicamos que se muestre la capa */
		$('#layerPreviewContent-3').show(600);
}
	
	/**
	 * Funcion que esconde las capas
	 */
function layer_close_3(event)
	{
		event.preventDefault();
        $('#layerPreviewContent-3').hide(300);
		$('#layerPreview-3').hide();
}




$('.btn-plus, .btn-minus').on('click', function(e) {
	const isPlus = $(e.target).closest('.btn-plus').is('.btn-plus');
	const input = $(e.target).closest('.input-group').find('input');
  if (input.is('input')) {
  	input[0][isPlus ? 'stepUp' : 'stepDown']()
  }
})