JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inline_wrapper inline_block_left">
   <div class="inline_block">блок автоматического размера слева</div>
</div>

<div class="inline_wrapper inline_block_right">
   <div class="inline_block">блок автоматического размера справа</div>
</div>

<div class="inline_wrapper inline_block_center">
   <div class="inline_block">блок автоматического размера по центру</div>
</div>

CSS

.inline_wrapper {
    background:#eee;
    text-align:center;
    margin:20px 0 0;
}
    .inline_block {
        display:inline-block;
        border:#f00 1px solid;
        background:#000;
        color:#fff;
        padding:5px;
    }
.inline_block_left {
    text-align:left;
}
.inline_block_right {
    text-align:right;
}
.inline_block_center {
    text-align:center;
}