How to Ensure my form has the same length as the block next to it?

Ik heb een magento 2 website hierop heb een pagina met een jotform en een block met test over de formulier zie de afbeelding of de webpagina die mee gestuurd word. nu zou ik graag willen dat mijn formulier mee scaled met de block ernaast zodat ze dezelfde lengte zijn hoe doe ik dit ik heb nu deze code: 

<iframe

      id="JotFormIFrame-240852448016354"

      title="Registreren als vakman"

      onload="window.parent.scrollTo(0,0)"

      allowtransparency="true"

      allow="geolocation; microphone; camera; fullscreen"

      src="https://form.jotform.com/240852448016354"

      frameborder="0"

      style="min-width:100%;max-width:100%;height:539px;border:none;"

      scrolling="no"

    >

    </iframe>    

    <script type="text/javascript">

    var ifr = document.getElementById("JotFormIFrame-240852448016354");

    if (ifr) {

      var src = ifr.src;

      var iframeParams = [];

      if (window.location.href && window.location.href.indexOf("?") > -1) {

        iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

      }

      if (src && src.indexOf("?") > -1) {

        iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

        src = src.substr(0, src.indexOf("?"))

      }

      iframeParams.push("isIframeEmbed=1");

      ifr.src = src + "?" + iframeParams.join('&');

    }

    window.handleIFrameMessage = function(e) {

      if (typeof e.data === 'object') { return; }

      var args = e.data.split(":");

      if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }

      if (!iframe) { return; }

      switch (args[0]) {

        case "scrollIntoView":

          iframe.scrollIntoView();

          break;

        case "setHeight":

          iframe.style.height = args[1] + "px";

          if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {

            iframe.style.minHeight = args[1] + "px";

          }

          break;

        case "collapseErrorPage":

          if (iframe.clientHeight > window.innerHeight) {

            iframe.style.height = window.innerHeight + "px";

          }

          break;

        case "reloadPage":

          window.location.reload();

          break;

        case "loadScript":

          if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }

          var src = args[1];

          if (args.length > 3) {

              src = args[1] + ':' + args[2];

          }

          var script = document.createElement('script');

          script.src = src;

          script.type = 'text/javascript';

          document.body.appendChild(script);

          break;

        case "exitFullscreen":

          if      (window.document.exitFullscreen)        window.document.exitFullscreen();

          else if (window.document.mozCancelFullScreen)   window.document.mozCancelFullScreen();

          else if (window.document.mozCancelFullscreen)   window.document.mozCancelFullScreen();

          else if (window.document.webkitExitFullscreen)  window.document.webkitExitFullscreen();

          else if (window.document.msExitFullscreen)      window.document.msExitFullscreen();

          break;

      }

      var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

      if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

        var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

        iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

      }

    };

    window.isPermitted = function(originUrl, whitelisted_domains) {

      var url = document.createElement('a');

      url.href = originUrl;

      var hostname = url.hostname;

      var result = false;

      if( typeof hostname !== 'undefined' ) {

        whitelisted_domains.forEach(function(element) {

            if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) ||  hostname === element ) {

                result = true;

            }

        });

        return result;

      }

    };

    if (window.addEventListener) {

      window.addEventListener("message", handleIFrameMessage, false);

    } else if (window.attachEvent) {

      window.attachEvent("onmessage", handleIFrameMessage);

    }

    </script>

sorry in english:  

I have a magento 2 website on this I have a page with a jotform and a block with test over the form see the image or the webpage that is sent along. now I would like my form to scale with the block next to it so they are the same length how do I do this I have this code now:

Hi Mirac,

Thanks for reaching out to Jotform Support. To make your form scale with the block next to it,  you can use CSS Flexbox. You can inject the CSS to your Magento theme’s CSS file below:

.container {

  display: flex; /* this will make its children (the form and the block) lay out in a row */

}





#JotFormIFrame-240852448016354, .your-block-class {

  flex: 1; /* this will make them take up equal width */

}

Please replace .your-block-class with he actual class of your block

Give it a try, and let us know how it goes.