Css – Is there way that I can align below?

enter image description here

I respect your help, I do not have an experience React and Java Script.
I am studying by my self so far so sorry for basic(?) question.
I have been struggling with this problem.

In the screenshot,

Distance, Time and Pace are center.
I want to make Distance: Time: Pace: left, and then align input boxes indivisually like below

// to use jsx 
import React, {useState, useEffect} from 'react';
import Logo from '../components/Logo';
import './styles.css'


// to reactcomponent(by function)

function Home() {
   const [message, setMessage]=useState([]);
   useEffect(()=>{
     fetch("/test/hello")
         .then((response)=>{
           return response.json();
         })
         .then((data)=>{
             setMessage(data);
         });
   },[]);
   return (
      <div>
         <div className="logo-container">
         <Logo />
         <h1 style={{ fontSize: '40px', color: '#333333' }}>Pace Calculator</h1>
         </div>

         <div className="input-container">
      <div className="input-group">
        <label className="label">
          Distance<span className="colon">:</span>
          <input className="input-field" type="text" placeholder="min" />
          : 
          <input className="input-field" type="text" placeholder="sec" />
          /km
        </label>
      </div>

      <div className="input-group">
        <label className="label">
          Time<span className="colon">:</span>
          <input className="input-field" type="text" placeholder="hr" />
          : 
          <input className="input-field" type="text" placeholder="min" />
          : 
          <input className="input-field" type="text" placeholder="sec" />
        </label>
      </div>

      <div className="input-group">
        <label className="label">
          Pace<span className="colon">:</span>
          <input className="input-field" type="text" placeholder="min" />
          : 
          <input className="input-field" type="text" placeholder="sec" />
          /km
        </label>
      </div>
    </div>
    <button className="calculate-button">Calculate</button>

    </div>
   );
 }
 
export default Home;

/* styles.css */

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 2px solid #333; /* Add a solid border with the color of your choice */
  border-radius: 10px;
  padding: 10px; /* Add padding for better visual appearance */
  max-width: 500px;
  margin: auto;
  margin-bottom: 20px;

}

.input-group {
  display: flex; /* Display the input groups in a row */
  align-items: center; /* Align items vertically in the input groups */
  margin-bottom: 10px;
}

.label {
  font-size: 30px; /* Adjust the font size as needed */
}


.input-field {
  width: 40px; 
  height: 25px;
  border-radius: 5px;
}

.calculate-button {
  margin-top: 30px; 
  background-color: #808080; 
  color: #fff; 
  padding: 10px 20px; 
  font-size: 30px; 
  cursor: pointer;
  border: none;
  border-radius: 5px;
  display: block;
  margin: 0 auto; /* Center the button */
}
.calculate-button:hover {
  background-color: #1b1b1b; /* Darker green color on hover */
}