In-Output

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://semantic-ui.com/dist/semantic.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="https://semantic-ui.com/examples/assets/library/iframe.js"></script>
  <script src="https://semantic-ui.com/examples/assets/library/jquery.min.js"></script>
  
  
  <style>
    body { margin:0;
      position:fixed;
      top:20px;
      right:0;
      bottom:0;
      left:0; }
    
    div{
      padding-top:5px;
      padding-left:10px;
      padding-right:10px;
      padding-bottom:10px;
    }
    
    div.sideRight{
      position:absolute;
      z-index:1;
      width:300px;
      top:0px;
      right:0px;
      height:100%;
      background-color:#3fa9f5;
    }
    
    p{
      color:white;
      font-size:16px;
    }
    
  </style>
</head>

<div class="ui checkbox">
      <input type="checkbox" name="Basement">
      <label>Finished Basement</label>
    </div>

<div class="ui checkbox">
      <input type="checkbox" name="Roof">
      <label>Roof Access</label>
    </div>

<div id="slidecontainer">Rear Yard
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  </div>
    
    <div class="ui divider"></div>
    
    <div>
      <p>Gross Sq. Footage: 1,800 sqft</p>
      <p>Floor: 3</p>
      <p>Rooms: 4 Bed / 2 Bath</p>
    </div>
    
    <div class="ui divider"></div>
    
    <div class="spaced">
      <button class="ui white button">Request a Sample Drawing Set</button>
    </div>
    
  </div>

svg.append("text")
      .text("svg text")
      .attr("y", 300)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")

</script>
</body>

https://d3js.org/d3.v4.min.js

https://semantic-ui.com/examples/assets/library/iframe.js

https://semantic-ui.com/examples/assets/library/jquery.min.js