JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>
<div class="inbox" id="teil0"><img src="http://testseite.strana.de/img/car.jpg" id="auto"></div>
<div class="inbox" id="teil1"><button id="los" onclick="fahreRechts()">поехали >></button></div>
</body>
CSS
body {
background: #029386;
display: grid;
grid-template-areas:
'oben'
'unten';
}
button {
grid-area: unten;
width: 140px;
height: 36px;
font-size: 16px;
}
#teil0,#teil1 {
width: 800px;
margin: auto;
padding-bottom: 5px;
padding-top: 8px;
}
#teil0 {
grid-area: oben;
width: 600px;
background: lime;
}
#teil1 {
grid-area: unten;
width: 600px;
background: #b6f4f7;
text-align: center;
}
JavaScript
var marginLeft = 0;
function fahreRechts()
{
marginLeft = Math.min(
marginLeft + 50,
$("#teil0").width() - $("#auto").outerWidth()
);
$("#auto").animate({marginLeft: marginLeft + "px"});
}