Align IconButton with Text in a line - css

Question

I need to put IconButtons together with plain text in one single text. However, it didn't show as I expected. Here is what I did:
JS(ReactJS):
<div>
<span>
<h3>Title</h3>
<IconButton className="editBtn" size="small">
<EditIcon style={{ fontSize: 25 }} />
</IconButton>
<IconButton className="deleteBtn" size="small">
<DeleteIcon style={{ fontSize: 25 }} />
</IconButton>
</span>
<p>Article</p>
</div>
CSS:
.deleteBtn {
padding: 3vw !important;
color: #e71f1f !important;
width: 5vh;
border: black;
}
.editBtn {
padding: 3vw !important;
color: #4ddd40 !important;
width: 5vh;
border: black;
}

Answer 1

It's tough to troubleshoot without access to the components and context but this code example might help give some cues for a direction to consider.
.deleteBtn {
padding: 32px;
color: #e71f1f;
border: black;
}
.editBtn {
padding: 32px;
color: #4ddd40;
border: black;
}
.inline {
display: inline-block;
}
<div>
<h3>Title</h3>
<button className="editBtn" size="small">
Edit
<span>icon</span>
</button>
<button className="deleteBtn" size="small">
Delete
<span>icon</span>
</button>
<span>Article</span>
</div>
<br/>
<br/>
<div>
<h3 class="inline">Title</h3>
<button className="editBtn" size="small">
Edit
<span>icon</span>
</button>
<button className="deleteBtn" size="small">
Delete
<span>icon</span>
</button>
<span>Article</span>
</div>

Answer 2

It just looks like there's no way to put buttons and header in the same line. Instead, I worked around by using tag.
<div>
<span>
<strong>Title</strong>
<IconButton className="editBtn" size="small">
<EditIcon style={{ fontSize: 25 }}/>
</IconButton>
<IconButton className="deleteBtn" size="small">
<DeleteIcon style={{ fontSize: 25 }}/>
</IconButton>
</span>
<p>Article</p>
</div>