在html里，文本放进背景框，两个button可以并列占一半

问题遇到的现象和发生背景

想要把文本放进带颜色的背景框里，同时希望button可以变大，两个button并列占页面一半

问题相关代码，请勿粘贴截图

html:

<html>
  <head>
    <title>task2.html</title> 
    <meta charset="utf-8"> 
    <script src="dom.js" defer></script>
    <link rel="stylesheet" type="text/css" href="dom.css">
  </head> 
 <body>
     <div id="first_one"style="float: left " >
    <button id="btn" type="button" class="btn" onclick="buttonClickHandler1();">
        First Button
    </button>
    </div>

    <div id="second_one" style="float: right;">
    <button id="butn" type="button" class="btn" onclick="buttonClickHandler2();">
        Second Button
    </button>
    </div>
    
</body>
</html>

js:

const buttonClickHandler1=function(){
    const h=document.createElement("h1");
    const t=document.createTextNode("Left is Right!")
    h.appendChild(t);
    document.body.appendChild(h);
}

const buttonClickHandler2=function(){
    const a=document.createElement("h1");
    const b=document.createTextNode("Right is Left!")
    a.appendChild(b);
    document.body.appendChild(a);
}

css:

#first_one{
    position: relative;
    width: 50%;
    height: 200px;
    background-color: darkblue;
}

#second_one{
    position: relative;
    width: 50%;
    height: 200px;
    background-color:darkgreen;
}

button{
    background-color:cornsilk;
    color:rgb(197, 38, 150);
    width:50%;
    height:35px;
}
运行结果及报错内容

这是我的运行结果：

img

我的解答思路和尝试过的方法

尝试css和js多种改变，都不行

我想要达到的结果

希望的结果：

img

谢谢大家的帮助啊，辛苦了

如果我没理解错的话，左右两边是分别 tab1 和 tab2，共四个按钮，你代码中只给了一个按钮呀。你多加一个按钮，效果应该就有了

img

已解决