HTMLでnカラム

↓動作結果

First section

Second section

何カラム作りたいか決めてpaddingとwidthいじって全体を100%に収める。

<style>
.clearfix {overflow: hidden;}
section {
  padding: 1%;
  min-height: 0px;/*必要なら入れる*/
  float: left;
}
.one {width: 48%; background-color: dodgerblue;}
.two {width: 48%; background-color: purple;}
</style>

<div class="clearfix">
  <section class="one">
    <p>First section</p>
  </section>
  <section class="two">
    <p>Second section</p>
  </section>
</div>

<script>(function(){
    let leftTxt ='';
    let rightTxt='';
    
    let sectionStyle='width: 48%;'
                    +'padding: 1%;'
                    +'min-height: 0px;'
                    +'float: left;'
    ;
    let output='<div style="overflow: hidden;">'
              +    '<section style="'+sectionStyle+'">'
              +        '<p>'+leftTxt+'</p>'
              +    '</section>'
              +    '<section style="'+sectionStyle+'">'
              +        '<p>'+rightTxt+'</p>'
              +    '</section>'
              +'</div>'
    ;
    document.write(output);
}());</script>



<script>(function(){
let leftTxt ='';
let rightTxt='';
let sectionStyle='width: 48%;'
                +'padding: 1%;'
                +'min-height: 0px;'
                +'float: left;'
    ;
let output='<div style="overflow: hidden;">'+'<section style="'+sectionStyle+'">'+'<p>'+leftTxt+'</p>'+'</section>'+'<section style="'+sectionStyle+'">'+'<p>'+rightTxt+'</p>'+'</section>'+'</div>';document.write(output);
}());</script>

■追記

//可読
<script>(function(){
    let leftTxt ='aa';
    let rightTxt='ii';
    let leftWidth='50';//%
    
    let leftSectionStyle ='width: '+(leftWidth-2)+'%;'
                         +'padding: 1%;'
                         +'min-height: 0px;'
                         +'float: left;'
    ;
    let rightSectionStyle='width: '+(100-leftWidth-2)+'%;'
                         +'padding: 1%;'
                         +'min-height: 0px;'
                         +'float: left;'
    ;
    let output='<div style="overflow: hidden;">'
              +    '<section style="'+leftSectionStyle+'">'
              +        '<p>'+leftTxt+'</p>'
              +    '</section>'
              +    '<section style="'+rightSectionStyle+'">'
              +        '<p>'+rightTxt+'</p>'
              +    '</section>'
              +'</div>'
    ;
    document.write(output);
}());</script>


//組み込み
<script>(function(){
let leftWidth='50';//%
let leftTxt ='aa';
let rightTxt='ii';
/*処理*/
let leftSectionStyle ='width: '+(leftWidth-2)+'%;'+'padding: 1%;'+'min-height: 0px;'+'float: left;';let rightSectionStyle='width: '+(100-leftWidth-2)+'%;'+'padding: 1%;'+'min-height: 0px;'+'float: left;';let output='<div style="overflow: hidden;">'+'<section style="'+leftSectionStyle+'">'+'<p>'+leftTxt+'</p>'+'</section>'+'<section style="'+rightSectionStyle+'">'+'<p>'+rightTxt+'</p>'+'</section>'+'</div>';document.write(output);
}());</script>

//組み込み2
<script>(function(){
let leftWidth='50';//%
let leftTxt ='aa';
let rightTxt='ii';
/*処理*/let leftSectionStyle ='width: '+(leftWidth-1)+'%;'+'padding: 0% 1% 0% 0%;'+'min-height: 0px;'+'float: left;';let rightSectionStyle='width: '+(100-leftWidth-1)+'%;'+'padding: 0% 0% 0% 1%;'+'min-height: 0px;'+'float: left;';let output='<div style="overflow: hidden;">'+'<section style="'+leftSectionStyle+'">'+'<p>'+leftTxt+'</p>'+'</section>'+'<section style="'+rightSectionStyle+'">'+'<p>'+rightTxt+'</p>'+'</section>'+'</div>';document.write(output);
}());</script>