Div's won't get responsive - html

Question

I simpley want the div with ID #knop next to the #plusmin when the screen is wide enough. When the screen gets smaller than the #knop has to get under the Plusmin...
I tried al kind of display options in the CSS with no effect...
See page: https://www.tricotstoffen.nl/tricot-stoffen/dierenprint/stenzo-tricot-konijnen-zwart-wit-bio-katoen.html
<div class="product-add-form">
<form action="https://www.tricotstoffen.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cudHJpY290c3RvZmZlbi5ubC90cmljb3Qtc3RvZmZlbi9kaWVyZW5wcmludC9zdGVuem8tdHJpY290LWtvbmlqbmVuLXp3YXJ0LXdpdC1iaW8ta2F0b2VuLmh0bWw,/product/324/" method="post"
id="product_addtocart_form">
<input type="hidden" name="product" value="324" />
<input type="hidden" name="selected_configurable_option" value="" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
<input name="form_key" type="hidden" value="xmAH6XJ8Kvrn2FTs" /> <style type="text/css">
#box{
width: 100%;
min-height: 55px;
display: inline-table;
}
#plusmin{
width: 210px;
height: 55px;
float: left;
padding-left: 3px;
margin-bottom:10px;
}
#knop{
height: 55px;
width: 175px;
float: left;
}
</style>
<div class="box-tocart" id="box">
<div class="fieldset">
<div class="field qty" id="plusmin">
<label class="label" for="qty"><span>Aantal</span></label>
<div class="control" data-bind="scope: 'qty_change'">
<button data-bind="click: decreaseQty">-</button>
<input data-bind="value: qty()"
type="number"
name="qty"
id="qty"
maxlength="12"
title="Aantal" class="input-text qty"
data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":0.5}}"
/>
<button data-bind="click: increaseQty">+</button>
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"qty_change": {
"component": "Jilco_plusminknoppen/js/view/product/view/qty_change",
"defaultQty": 0.5 }
}
}
}
}
</script>
</div>
<div class="actions" id="knop">
<button type="submit"
title="In Winkelwagen"
class="action primary tocart"
id="product-addtocart-button">
<span>In winkelwagen</span>
</button>
</div>
</div>
</div>
<script type="text/x-magento-init">
{
"#product_addtocart_form": {
"Magento_Catalog/product/view/validation": {
"radioCheckboxClosest": ".nested"
}
}
}
</script>
</form>
</div>

Answer 1

div#plusmin on the example page you provided has an inline style attribute, which was probably set by some magento javascript. You can see it in your browsers development console:
<div class="field qty" id="plusmin" style="width: 100%; display: block;">
...
</div>
This is screwing you over because inline style attribute rules take precedence over css style rules. As a quick fix you could append the css rule that sets the div's width with !important. Such rules cannot be overridden by style attribute rules.
#plusmin{
width: 210px !important;
...
}

Answer 2

Have a look here, you need to use #media queries to adjust your css when the screen is x pixels wide.
As as example:
#media screen and (max-width: 400px) {
#knop {
width: 100%;
}
#plusmin {
width: 100%;
}
}