My code currently looks like this:

```css
.data-title {
  font-weight: bold;
}

.data-content {
  color: gray;
}
```

```html
<p class="data-title">
  Title
</p>
<p class="data-content">
  Content
</p>
```

The result is how I intended it to look:

[![enter image description here](https://i.stack.imgur.com/jeaVV.png)](https://i.stack.imgur.com/jeaVV.png)

However, I would like to make the following two changes:

1. Decrease the margin between the elements.
2. Have a single class on a parent element instead of the two classes on the paragraphs that automatically identifies the first line and second line and applies the current styles.

```
<div class="my-class">
  <p>Title</p>
  <p>Content</p>
</div>

```