您可以尝试许多方法。
1.至少我想到的第一个方法是给“text_content”添加CSS左填充属性。短期来看，我不认为这是最好的解决方案，因为您可能会有不同的屏幕尺寸，并且在较小的屏幕上，填充可能会将文本向右推得太多。
1.第二个想法是创建一个父/容器div.（如下所示），并尝试使用以下资源（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）向“容器”CSS类添加一些flex-box。

<div id='container'>
 <div id="sidebar_button_container">
   <ion-button href="start-game" color="dark" expand="block">{{ newgame_text 
 }}</ion-button>
   <ion-button href="view-previous-games" color="dark" expand="block">{{ 
 viewgames_text }}</ion-button>
 </div>

 <div id="text_content">
   Test. Example Text, This is so that I can read it wherever it is.
 </div>
</div>

1.最后一个可能的想法/解决方案是使“text_content”相对于父对象。您可以在这里找到一个如何实现的示例（Position absolute but relative to parent）。
我希望这能帮助你找到解决方案，这是我第一次为Stack Overflow做贡献，所以很抱歉不能立即提供答案。（如果你有一个公共仓库，你愿意分享，我可以克隆你的项目，然后自己做一些修改）。干杯。

你应该看看ionic grid
你可以这样写

<ion-grid>
    <ion-row>
        <ion-col size="2">
            <ion-button
                href="start-game"
                color="dark"
                expand="block"
            >{{ newgame_text }}</ion-button>
            <ion-button
                href="view-previous-games"
                color="dark"
                expand="block"
            >{{ viewgames_text }}</ion-button>
        </ion-col>

        <ion-col>
            Test. Example Text, This is so that I can read it wherever it is.
        </ion-col>
    </ion-row>
</ion-grid>