html make 2 double-line texts have same distance between lines - html

Question

I need to format my layout of html into this way:
However, my actual result is this:
I want the distance between "service name"(Pirate Service) and "status"(Proposed) equal to the distance between "API Name"(Get All Loot) and "Resource Name"(Pirates), but the service-status(Pirate Service, Proposed) distance is too large.
How to reduce the distance between "Service Name"(Pirate Service) and "Status"(Proposed)?
my typescript code:
import "./Description.css";
interface DescriptionProps {
name: string;
service: string;
resource: string;
status: string;
}
export const Description = ({name, service, resource, status,}: DescriptionProps) => {
return (
<div>
<div className="name-service-container">
<h1>
<span className="names">{name}</span>
</h1>
<h4>
<span className="services">{service}</span>
</h4>
</div>
<br />
<div className="resource-status-container">
<p>
<span className="resources">{resource}</span>
</p>
<p>
<span className="status">{status}</span>
</p>
</div>
</div>
);
};
my css:
.resources {
display: inline;
float: left;
font-style: italic;
clear: left;
}
.names {
display: inline;
float: left;
}
.services {
float: right;
bottom: 0;
}
.status{
float: right;
top:0;
}
.resource-status-container{
margin-right: 30px;
}
.name-service-container{
margin-right:30px;
}

Answer 1

Do you want something like this?
h1,h4,p {
margin:0;
}
.container {
display:flex;
align-items:center;
justify-content:space-between;
background-color:gray;
}
.name-service-container,
.resource-status-container {
display:flex;
flex-direction:column;
justify-content:center;
gap: 0.5rem; /* Control distance between elements */
}
<div class="container">
<div class="name-service-container">
<h1><span class="names">{name}</span></h1>
<h4><span class="services">{service}</span></h4>
</div>
<div class="resource-status-container">
<span class="resources">{resource}</span>
<span class="status">{status}</span>
</div>
</div>