Align icons and text with CSS - html

Question

I want the text to be placed to the right of each icon but it ends up looking like this:
I've tried setting the .panel display to table but it looks like a mess.
.panel {
padding: 0 18px;
background-color: white;
/*#F7F7F7;*/
display: none; //With a function it's then displayed as Block
overflow: hidden;
border: 0.5px solid #ccc;
}
.lock {
float: right;
}
.status {
float: left;
}
.status_icon {
width: 30px;
height: 30px;
margin: 0;
margin-top: 4px;
margin-right: 15px;
cursor: pointer;
vertical-align: baseline;
display: table-cell;
}
.lock_icon {
width: 30px;
height: 30px;
margin: 0;
margin-top: 4px;
margin-right: 15px;
cursor: pointer;
vertical-align: baseline;
display: table-cell;
}
<div class="panel">
<div class="status">
<img src="Iconos/closed.png" alt="Closed" class="status_icon" onclick="stat(event,this);">
<p class="stat_text">Current status: Closed</p>
</div>
<div class="lock">
<img src="Iconos/locked.png" alt="Locked" class="lock_icon" onclick="lock(event,this);">
<p class="lock_text">Current lock: Locked</p>
</div>
</div>

Answer 1

Using display:flex would be best approach to achieve this result. Try this CSS code.
.panel {
padding: 0 18px;
background-color: white;
overflow: hidden;
border: 0.5px solid #ccc;
display: flex;
justify-content: space-between;
}
.lock {
display: flex;
}
.status {
display: flex;
}
.status_icon {
width: 30px;
height: 30px;
margin: 0;
margin-top: 4px;
margin-right: 15px;
cursor: pointer;
}
.lock_icon {
width: 30px;
height: 30px;
margin: 0;
margin-top: 4px;
margin-right: 15px;
cursor: pointer;
}