想要在 css 中对齐同一行中的两个单词

Question

I have two words that will change after some JavaScript coding. They will be arrays. I can perform the JavaScript coding well, but I want them to be aligned instead of one above the other:

<div class="testArrayDiv">   
    <input type="text" id="testArrayText" value="aqui" class="testArrayText">
    <p id="pTextIng" class="pTextIng">Inglés</p> 
    <p id="pTextPor" class="pTextPor">Português</p>    
    <button id="btnArray" class="btnArray">Test Array</button>
</div>    

My CSS coding:

.pTextIng {
    margin-left: 45%;
}

.pTextPor {
    margin-left: 45%;
}

The words "Inglés" and "Português" will become columns after some Javascript commands, but they are not aligned and I want them to be aligned.

Answer 1

 .pTextIng { border:1px solid black; width:80px; display:inline-block; } .pTextPor { border:1px solid red; width:80px; display:inline-block; }

 <div class="testArrayDiv"> <input type="text" id="testArrayText" value="aqui" class="testArrayText"> <p id="pTextIng" class="pTextIng">Inglés</p> <p id="pTextPor" class="pTextPor">Português</p> <button id="btnArray" class="btnArray">Test Array</button> </div>

Answer 2

<p> automatically inserts a line break after the text. If you do not want this you should use <span> . I assume you want both words on the same line as your input field, so you should put both <span> elements inside a <div> and apply margin-left to that.

HTML:

<div class="indentation">
    <span id="pTextIng" class="pTextIng">Inglés</span> 
    <span id="pTextPor" class="pTextPor">Português</span>
</div>

CSS:

.indentation {
    display: inline-block;
    margin-left: 45%;
}

Answer 3

If you make a div with both p inside like:

<div class="testArrayDiv">   
    <input type="text" id="testArrayText" value="aqui" class="testArrayText">
    <div class="idiomas">
        <p id="pTextIng" class="pTextIng">Inglés</p> 
        <p id="pTextPor" class="pTextPor">Português</p>  
    </div>  
    <button id="btnArray" class="btnArray">Test Array</button>
</div> 

And then you make this div element flex and flex-direction: row

.idiomas{
    display: flex;
    flex-direction: row;
}

Answer 4

You need to add vertical-align: top; to fix the issue

.testAlign p {
    display: inline-block;
    vertical-align: top;
    /* other styles */
}

and also that <p> tags need to be inside a <div>

<div class = "testAlign">    
    <p id="pTextIng" class="pTextIng">Inglés</p> 
    <p id="pTextPor" class="pTextPor">Português</p>
</div>