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" />


<div class="container">

  
<div class="kaufen">

      <form class="form-basket" method="post"  enctype="multipart/form-data">
             <fieldset class="addtobasket-container">    
      
                <span class="tittle-kaufen">Rucksack aus Hanf Gelbe mit Zwei Riemen</span>
 
                <span class="preis"> Preis 40 &euro; </span>

                <span class="piece">Stück</span>
  
               <div class="quantity">

                               
                          <input type="button" value="+" class="plus">
                           <input type="number" step="1" max="99" min="1" value="1" title="Qty" class="qty" size="4">
                          <input type="button" value="-" class="minus">
               </div>
               <div class="button_wrap"  >
                     <button class="button_wrap_buttom" type="buttom"  onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
               </div> 
            </fieldset> 
         </form>      
                           <!-- En el...

CSS

.kaufen {

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

}


.tittle-kaufen  {margin-left: 15%; font-weight: bold; width: 100%;   float: left; }

.preis {margin-left: 4%; font-weight: bold;  margin-top: 5%; float: left; }

.piece {float: right; font-weight: bold; padding-top: 20%; margin-right: 55%;  }


   
.quantity {
    float: left;
    margin-top: 5%;
    background-color: #eee;
    position: relative;
    width: 18%;
    overflow: hidden;
    margin-left: 3%;
    border: 1px solid #b3b3b3;
     margin-left: 9%;
}

.quantity input {
    margin: 0;
    text-align: center;
    width: 5%;
   
    padding: 0;
    float: right;
    color: #000;
    font-size: 1.5rem;
    border: 0;
    outline: 0;
    background-color:  #d9d9d9;
    
    
}

.quantity input.qty {
    position: relative;
    border: 0;
    width: 100%;
    
    padding: 0.625rem 1.5625rem 0.625rem 0.625rem;
    text-align: center;
    font-weight: 400;
    font-size: 15px;
    border-radius: 0;
    background-clip: padding-box
}

.quantity .minus, .quantity .plus {
    line-height: 0;
    background-clip: padding-box;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-background-size: 0.375rem 1.875rem;
    -moz-background-size: 0.375rem 1.875rem;
    color: black;
    font-size: 1.25rem;
    position: absolute;
    height: 50%;
    border: 0;
    right: 0;
    padding: 0;
    width: 33%;
    z-index: 3
}

.quantity .minus:hover, .quantity .plus:hover {
    background-color: #dad8da
}

.quantity .minus {
    bottom: 0
}


.button_wrap {

        float: right;
        min-width: 75%;
        background-color: transparent;
        
        background-position-x: 0%;
        background-position-y: 0%;
        background-repeat: repeat;
        background-attachment: scroll;
        background-image: none;
       ...

JavaScript

function layer_show_3(event)
	{
		
    event.preventDefault();
		$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
		
	
		var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
		if(posTop<0)
			posTop=0;
		$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
		
		$('#layerPreviewContent-3').show(600);
}
	

function layer_close_3(event)
	{
		event.preventDefault();
    $('#layerPreviewContent-3').hide(300);
		$('#layerPreview-3').hide();
}