javascript - JS & CSS: Font-color and thickness of a single word in the same sentence line

Question

I have the following problem:

I want to change the color and thickness of a single word (->(Admin)) in the same sentence line. My code does do what it should, but unfortunately it is totally unformated now and does have line skips. I used JavaScript and CSS, but I am a totally beginner in this field. Probably there is much redundancy in the code.

I used "span", h1 -> child (1)/(2) and so on in the .js file and corresponding entries in the .css file:

.js Datei:

<div id="user-info">
      <div><h1><span>{this.props.dataHandler["userData"]["firstname"]} {this.props.dataHandler["userData"]["lastname"]}</span><span> (Admin)</span></h1></div>
      <div><h2><span>Mitarbeiternummer: {this.props.dataHandler["userData"]["userID"]}</span></h2></div>
      <div><a href="/#"onClick={this.logout.bind(this)}><u>Logout</u></a></div>
      </div>

.css Datei:

#user-info {
    color: white;
    width: 15%;
    margin: 0.3vh 0 0 0;
  }

#user-info h1 :nth-child(1) {
    color: white; 
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0 0 0 0; 
     
  }
    
#user-info h1 :nth-child(2) {
    color: red;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info h2 {
    color: white;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info div{
    font-size: 1.5vh;
  }

question from:https://stackoverflow.com/questions/65943954/js-css-font-color-and-thickness-of-a-single-word-in-the-same-sentence-line

Answer 1

It's happening because all of your elements are set to just 15% of width.

You can see how narrow #user-info is.

So, your solution is to remove width: 15% from #user-info.

body {
  background: black;
}
#user-info {
    color: white;
    margin: 0.3vh 0 0 0;
  }

#user-info h1 :nth-child(1) {
    color: white; 
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0 0 0 0; 
     
  }
    
#user-info h1 :nth-child(2) {
    color: red;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info h2 {
    color: white;
    font-size: 1.5vh;
    font-weight: normal;
    width: 15%;
    margin: 0.3vh 0 0 0; 
  }

#user-info div{
    font-size: 1.5vh;
  }

<div id="user-info">
      <div><h1><span>{this.props.dataHandler["userData"]["firstname"]} {this.props.dataHandler["userData"]["lastname"]}</span><span> (Admin)</span></h1></div>
      <div><h2><span>Mitarbeiternummer: {this.props.dataHandler["userData"]["userID"]}</span></h2></div>
      <div><a href="/#"onClick={this.logout.bind(this)}><u>Logout</u></a></div>
      </div>