установить текст влево, в то время как другие элементы центрированы - CSS - Bootstrap 4

Question

Я думал, что я пытался сделать это довольно просто.На изображении ниже я хочу, чтобы описание «Флаги печати» находилось слева от поля с кнопками по центру справа:

Но это так близко, как ясмог получить его.

Вот мой код (в настоящее время):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/VERSION/styles/kendo.bootstrap.min.css">


 <div class="col" style="position: relative; text-align: center; border-style: solid; border-width: thin">
                <div  style="position: absolute; left: 0px;  background-color: #ff8c00; font-weight: bold;">Print Flags
                </div>
                    <kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlags(1)">All Print To True</kendo-button>
                    <kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlags(2)"> All Print To False</kendo-button>
            </div>

Используя предложенный ответ, он приблизился ко мне, однако он перестал заполнять div по вертикали (хотя фрагмент кода выглядит правильно) Я обновил свой код выше до последней:

Answer 1

Надеюсь, это поможет вам ...

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/VERSION/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/VERSION/styles/kendo.bootstrap.min.css">


<div class="col" style="position: relative; text-align: center; border-style: solid; border-width: thin;">
    <div  style="position: absolute;left: 5px;top: 50%; transform: translateY(-50%)">
        Print Flags
    </div>
    <kendo-button name="printTrue" type="button" onclick="FlipAllPrintFlags(1)">All Print To True</kendo-button>
    <kendo-button name="printFalse" type="button" onclick="FlipAllPrintFlags(2)">All Print To False</kendo-button>
</div>