Question: I want a title text and some description text. How can I align title text in between `left` and `center`? If `left` equals `0%` and `center` equals `50%`, I want to align text in `25%`. Can I achieve this without hardcoding margin?

```css
p{
  text-align: center
}

h2{
  /*How to align H2 in place between text-align: left
    and text-align: center?*/
}
```

```html
<div>
    <h2>Title</h2>
    <p>Description</p>
</div>
```

I am looking for a solution that doesn't use `position: absolute` to do the trick, as I want to write as little rule as possible.

Answer: 
Something like this?

```css
p {
  text-align: center;
}

h2 {
  text-align: center;
  columns: 2;
}
```

```html
<div>
  <h2>Title</h2>
  <p>Description</p>
</div>
```

But do mind if the `p` is too long it might go to the next column. It's better to use `margin`, `width` or `flex-basis` with flexbox.

You can also use grid:

```css
p {
  text-align: center;
}

h2 {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
```

```html
<div>
  <h2>Title</h2>
  <p>Description</p>
</div>
```
This should work and will give you the correct 1/4 position for the paragraph element in relation to the full width, at any viewport width:

```css
h2 {
  text-align: center;
}

p {
  display: block;
  text-align: center;
  transform: translateX(-25%);
}
```

```html
<div>
  <h2>Title</h2>
  <p>Description</p>
</div>
```