JSFiddle - React, Tailwind, and code Playground

by isqua

HTML

<h1 class="var1">
    <span class="title">Новости</span>
    <span class="subtitle">Все новости</span>
</h1>

<h1 class="var2">
    <span class="title">Новости</span>
    <span class="subtitle">Все новости</span>
    <span class="sep"></span>
</h1>

<h1 class="var3">
    <span class="title">Новости</span>
    <span class="sep"></span>
    <span class="subtitle">Все новости</span>
</h1>

CSS

.var1 {
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=') repeat-x 0 50%;
}
.var1 .title,
.var1 .subtitle {
    background: #fff;
}
.var1 .subtitle {
    float: right;
}

.var2 .title {
    float: left;
}
.var2 .subtitle {
    float: right;
}
.var2 .sep {
    display: block;
    overflow: hidden;
    height: 40px;
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=') repeat-x 0 50%;
}

.var3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.var3 .sep {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=') repeat-x 0 50%;
}