title: CSS - Dynamic border according to content
body: <p>I am using FlexBox to create a multi-column form template.</p>
  
  <p>I have a center DIV with a width of 66.7%.</p>
  
  <p>I am looking for a way to have a border that will resize according to the content inside the center div (And not surround the entire DIV like in the example)</p>
  
  <p>Is there some way to achieve it?</p>
  
  <p>CodePen: <a href="https://codepen.io/dsomekh/pen/NjRQjK" rel="nofollow noreferrer">https://codepen.io/dsomekh/pen/NjRQjK</a></p>
  
  <pre><code>&lt;html&gt;
  &lt;style&gt;
  input:([type=radio]){
      min-width:10px;
  }
  
  
  .page{
      display:flex;
      /*border: 5px solid orange;*/
  }
  
  .left{
      width:33.3%;
      /*border: 5px solid pink;*/
  }
  .center{
      width:66.7%;
      border: 2px solid skyblue;
  }
  
  .row_title{
      display:flex;
      flex-direction:row;
      align-items:flex-end;
      /*border: 5px solid skyblue;*/
  }
  
  .row_input{
      display:flex;
      margin-bottom:1%;
      align-items:flex-start;
      flex-direction:row;
      /*border: 5px solid skyblue;*/
  }
  
  .cell_right_Radio{
      max-width:300px;
      overflow:auto;
      flex-direction:column;
      display:flex;
      flex-direction:row
      flex-wrap:wrap;
  
  
  }
  
  .cell_right_CB{
      max-width:300px;
      overflow:auto;
      display:flex;
      justify-content:flex-start;
      flex:1;
  
  }
  
  .cell_right{
      max-width:300px;
      overflow:auto;
      display:flex;
      flex-direction:column;
      justify-content:flex-start;
      flex:1;
  
  }
  
  .cell_left{
      margin-right:10%;
      max-width:300px;
      overflow:auto;
      flex-direction:column;
      display:flex;
      flex:1;
  
  }
  
  .option{
      margin-top:2%;
      display:flex;
  
  }
  &lt;/style&gt;
  
  &lt;div class="page"&gt;
      &lt;div class="left"&gt;&lt;/div&gt;
      &lt;div class="center"&gt;
              &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions&lt;/div&gt;
                      &lt;div class="cell_right"&gt;Reason for clone&lt;/div&gt;
              &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                      &lt;div class="cell_right"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;Name&lt;/div&gt;
                      &lt;div class="cell_right"&gt;Email&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;textarea rows="12" cols="100"&gt;&lt;/textarea&gt;&lt;/div&gt;
                      &lt;div class="cell_right"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;Title&lt;/div&gt;
                      &lt;div class="cell_right"&gt;Company&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                      &lt;div class="cell_right"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;Reseller&lt;/div&gt;
                      &lt;div class="cell_right"&gt;Reason for clone&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                      &lt;div class="cell_right_Radio"&gt;&lt;div class="option"&gt;&lt;input type="radio" style="min-width:13px!important" name="gender" value="male"&gt;Hardware change&lt;/div&gt;&lt;div class="option"&gt;&lt;input style="min-width:13px!important" type="radio" name="gender" value="male"&gt;Unknown&lt;/div&gt;&lt;div class="option"&gt;&lt;input  style="min-width:13px!important" type="radio" name="gender" value="male"&gt;Version upgrade&lt;/div&gt;&lt;div class="option"&gt;&lt;input style="min-width:13px!important" type="radio" name="gender" value="male"&gt;New physical host&lt;/div&gt;&lt;div class="option"&gt;&lt;input style="min-width:13px!important" type="radio" name="gender" value="male"&gt;Other&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;Support person email Support person email Support person email&lt;/div&gt;
                      &lt;div class="cell_right"&gt;By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                      &lt;div class="cell_right_CB"&gt;&lt;input type="checkbox" name="vm" onclick="Onvm(this)"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;Virtual machine platform&lt;/div&gt;
                      &lt;div class="cell_right"&gt;Virtual machine clusterd (Hosted on multiple servers)&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                      &lt;div class="cell_right"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;TeamViewer ID&lt;/div&gt;
                      &lt;div class="cell_right"&gt;TeamViewer Password&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                      &lt;div class="cell_right"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_title"&gt;
                      &lt;div class="cell_left"&gt;Screenshot&lt;/div&gt;
                      &lt;div class="cell_right"&gt;By filling this form I obligate that the old license will no longer be used, and understand that any usage might cause legal actions&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row_input"&gt;
                      &lt;div class="cell_left"&gt;&lt;input type="file" name="screenshot"&gt;&lt;/div&gt;
                      &lt;div class="cell_right"&gt;&lt;input type="text" name="phone"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>