怎么让两个div显示在一行的有关问题 _HTML/CSS

如何让两个div显示在一行的问题

HTML code



<div id="father" style="width:70px;height:30px;overflow:hidden;border:1px solid;">
    <div id="son" style="width:100%;height:30px;overflow:hidden;white-space:nowrap;"><!--不修改这个div的像素宽度-->
    
        <!--使这两个div能排在一行-->
        <div id="grandson1" style="float:left;width:50px;height:30px;background-color:gray;">xxx</div>
        <div id="grandson2" style="float:left;width:50px;height:30px;background-color:pink;">yyy</div>
        
    </div>
</div>

要求：
1.不改father
2.不能给son指定具体的像素值。
3.使grandson1,grandson2显示在一行

------解决方案--------------------
grandson1 diaplay:inline;
grandson2 diaplay:inline;
还可以不用float了