how to make two div at the same line with different div without parent div?-CodePudding

I am writing a css code to make two div at the same line but it's not working properly.

Here is my HTML code sample -

<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div class='secondDiv'>
        <input type='text' />
    </div>
    <div class='thirdDiv'>
        <input type='text' />
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>

Here is my CSS code -

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.secondDiv {
    max-width: 66.66%;
    display: 'inline-block';
}
.thirdDiv {
    max-width: 33.33%;
    display: 'inline-block';
}
.fourthDiv {
    max-width: 100%;
}

firstDiv is coming in full line, I want secondDiv & thirdDiv in same line with 66.66% & 33.33% width respectively. then fourthDiv is coming full line. Only secondDiv & thirdDiv is creating a problem. It is coming in same line due to inline-block but width is not the same which I have given for both div. How can I make secondDiv & thirdDiv in the same line with 66.66 & 33.33% width respectively ?

CodePudding user response：

Remove ' on display: inline-block;

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.secondDiv {
    max-width: 66.66%;
    display: inline-block;
}
.thirdDiv {
    max-width: 33.33%;
    display: inline-block;
}
.fourthDiv {
    max-width: 100%;
}

<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div class='secondDiv'>
        <input type='text' />
    </div>
    <div class='thirdDiv'>
        <input type='text' />
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>

CodePudding user response：

Use 'display: inline-block;' or 'float: left' in second Div.

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.secondDiv {
    max-width: 66.66%;
    display: inline-block; // or float: left;
}
.thirdDiv {
    max-width: 33.33%;
    display: inline-block;
}
.fourthDiv {
    max-width: 100%;
}

<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div class='secondDiv'>
        <input type='text' />
    </div>
    <div class='thirdDiv'>
        <input type='text' />
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>

CodePudding user response：

One way good in this case is flex:

.A {
    max-width: 100%;
    display: block;
}

.firstDiv {
    max-width: 100%; 
}
.container{
  display: flex;
  gap: 5px;
}
.secondDiv {
    max-width: 66.66%;
}
.thirdDiv {
    max-width: 33.33%;
}
.fourthDiv {
    max-width: 100%;
}

<section class='A'>
    <div class='firstDiv'>
        <input type='text' />
    </div>
    <div >
    <div class='secondDiv'>
        <input type='text' />
    </div>
    <div class='thirdDiv'>
        <input type='text' />
    </div>
    </div>
    <div class='fourthDiv'>
        <input type='text' />
    </div>
</div>