JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-static-top">

</nav>
<div class="container">
    <div class="line">
        <header class="header no-print" style="border-bottom: 2px solid gray; margin-bottom: 35px;">
            <div class="row">
                <form class="form-horizontal" name="formulario" method="POST">
                    <div class="container" id="decrease-input">
                        <div class="col-sm-6">
                            <div class="form-group col-lg-12">
                                <label for="Fabric">Fabric Wide</label>
                                <input id="Fabric" name="Fabric" type="text" placeholder="mm" class="form-control input-md">
                            </div>
                            <div class="form-group col-lg-12">
                                <label for="Spare">Spare width</label>  
                                <input id="Spare" name="Spare" type="text" placeholder="mm" class="form-control input-md">
                            </div>
                            <div class="form-group col-lg-12">
                                <label for="Xres">Resolution X</label>  
                                <input id="Xres" name="Xres" type="text" placeholder="mm/pixel" class="form-control input-md">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group col-lg-12">
                                <label for="Yres">Resolution Y</label>  
                                <input id="Yres" name="Yres" type="text" placeholder="mm/pixel" class="form-control input-md">
                         ...

CSS

table thead tr th, table tbody tr td{
  text-align: center;
}
.container{
  width: 75%;
}

JavaScript

$(function () {
    $('form[name="formulario"] input').keydown(function () {
        //capturando os valores dos formularios
        var dados_do_formulario = $('form[name="formulario"]').serialize();
        //enviando os valores por meio do metodo POST para a pagina de calculo[.php]    
        $.post("calculo.php", {dados: dados_do_formulario}, function (resposta) {
            $(".resposta").html(resposta);
        });
    });

    //gerar PDF
    $('#gerar_relatorio').click(function () {
        var pdf = new jsPDF('p', 'pt', 'letter'),
                id_da_parte_html = $('.html2pdf')[0]; //pode ser qualuer seletor na verdade


        margem = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };
        pdf.fromHTML(
                id_da_parte_html,
                margem.left,
                margem.top, {
                    'width': margem.width
                },
        function (resultado) {
            pdf.save('teste_html2pdf.pdf');
        }, margem);

    });
});