html - 内側のテキストに従って div を展開します

Question

HTML に次の div 要素があります。それらはボタンとして機能します。

  <div id="button-section">
    <!-- Section for function buttons -->
      <div class="fn-button">
      <!-- Function button -->
        <span>My Current Checks</span>
      </div>
      <div class="fn-button">
      <!-- Function button -->
        <span>All Current Checks</span>
      </div>
      <div class="fn-button">
      <!-- Function button -->
        <span>Add New order</span>
      </div>
  </div>

これは、要素に使用した CSS です。

 #button-section{
width: 100%;
height: 150px;
position: fixed;
bottom: 0;
background-color: rgb(229, 229, 255);
 }

 .fn-button{
width: 130px;
height: 50px;
float: left;
margin: 10px 0px 0px 20px;
border-radius: 10px;
background: rgb(111, 111, 111);
box-shadow: inset 1px 4px 12px rgb(0, 0, 0);
text-align: center;
 }

 .fn-button span{
padding: 0px;
margin: 0px 0px 0px 0px;
color: white;
vertical-align: -17px;
font-size: 20px;
 }

問題は、各 div 要素内のテキストに従って幅を調整する必要があるということです! このためには、各要素の幅を定義するか、別の方法を見つける必要があります。下の画像は、div の私の状況を表示します。

内部テキストに従って div を動的に拡張するにはどうすればよいですか?