How do align two elements in a div (excluding the heading) in a same line with gap?-CodePudding

I have a html code:

<div >
    <h4><u>Newspaper particulars</u></h4><br>
    <label for="date">Select date :</label><br>
    <input type="date" id="date" name="date" style="text-align: center;"><br><br>
    <label for="news">Select newspaper :</label><br>
    <select name="news" id="news" style="text-align: center;">
        <option value="default">Click to select</option>
        <option value="The Assam Tribune">The Assam Tribune</option>
        <option value="The Times of India">The Times of India</option>
        <option value="The Hindu">The Hindu</option>
        <option value="Hindustan Times">Hindustan Times</option>
        <option value="The Telegraph">The Telegraph</option>
    </select>
</div>

And my css:

.bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
}

I want to have the two input tags (date and select) on the same line, along with their labels (which will be on the left side of their respective input tags). How do I do that?

CodePudding user response：

Added some in line css and class with display:flex; and margins

.bg-text {
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    border: 3px solid #f1f1f1;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 20px;
    text-align: center;
}

.center-y{
  margin-top: auto; margin-bottom: auto; 
}

label{
  white-space: nowrap;
}

.center-x{
  margin-left: auto; margin-right: auto; 
}

.margins{
  margin-right: 5px; margin-left: 5px;
}

<div  style="display:flex; flex-direction: column;">
    <h4><u>Newspaper particulars</u></h4><br>
  <div style="display: flex;" >
    <label  for="date">Select date :</label><br>
    <input type="date" id="date" name="date" style="text-align: center;"><br><br>
    <label  for="news">Select newspaper :</label><br>
    <select name="news" id="news" style="text-align: center;">
        <option value="default">Click to select</option>
        <option value="The Assam Tribune">The Assam Tribune</option>
        <option value="The Times of India">The Times of India</option>
        <option value="The Hindu">The Hindu</option>
        <option value="Hindustan Times">Hindustan Times</option>
        <option value="The Telegraph">The Telegraph</option>
    </select>
  </div>
</div>

CodePudding user response：

<div >
    <h4><u>Newspaper particulars</u></h4><br>
    <div>
        <label for="date">Select date :</label><br>
        <input type="date" id="date" name="date" style="text-align: center;"><br><br>
    </div>
    <div>
        <label for="news">Select newspaper :</label><br>
        <select name="news" id="news" style="text-align: center;">
            <option value="default">Click to select</option>
            <option value="The Assam Tribune">The Assam Tribune</option>
            <option value="The Times of India">The Times of India</option>
            <option value="The Hindu">The Hindu</option>
            <option value="Hindustan Times">Hindustan Times</option>
            <option value="The Telegraph">The Telegraph</option>
        </select>
    </div>
</div>

    .bg-text {
        display:flex;
        align-items:center;
        justify-content:space-around;
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
        color: white;
        font-weight: bold;
        border: 3px solid #f1f1f1;
        position: absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: center;
    }
    .bg-text>div{display:flex;align-items:center;}

Is that what you mean?