How to put a text next to a text in HTML/CSS?-CodePudding

I'm trying to get something like this: End result

Currently, I have this: Current result. I cannot get Mount Fuji text below the other text on the right. Please help, and sorry if this question is easy to fix, I'm not good with CSS. Thanks!

Below is my HTML code:

        <div className="card">
            <img className="card--image" src={prop.item.image} width={150} />
            <div className="card--header">
                <img classname="card--marker" src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/>
                <p>{prop.item.location}</p>
                <p className="card--map"><a href={prop.item.URL}>View on Google Maps</a></p>
            </div>
            <p className="card--title">{prop.item.title}</p>
        </div>

Below is my CSS code:

.card {
    float: left;
    gap: 20px;
    flex-direction: column;
    margin-top: 75px;
    margin-right: 0px;
    margin-left: 200px;
    background-color: aqua;
}

.card--header {
    float: right;
    margin-left: 7px;
    background-color: antiquewhite;
    font-weight: normal;
    letter-spacing: 0.17em;
    margin-right: 0px;
    text-align: center;
    vertical-align: top;
    text-transform: uppercase;
}

.card--header > p {
    margin-top: 0;
    margin-left: 3px;
    font-size: 13px;
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.card--map {
    padding-left: 20px;
    color: #918E9B;
}

.card--title {
    font-weight: bold;
    letter-spacing: 0.02em;
    
}

CodePudding user response：

Your structure need little updates, you have to separate your card into 2 containers. left container have Image and right container have all details.

Try to use Flex and avoid float, I update all changes in code snippet and i hope it'll help you out. Thank You

.card {
  background-color: aqua;
  display: flex;
  margin: 75px 0 0 200px;
  gap: 20px;
}

.card--detail {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
}

.card--detail label {
  font-weight: bold;
  letter-spacing: 0.02em;
  margin-bottom: 5px;
}

.card--detail small {
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card--detail p {
  font-size: 12px;
}

.card--header {
  background-color: antiquewhite;
  display: flex;
  align-items: center;
  font-weight: normal;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.card--header a {
  color: #918E9B;
  font-size: 13px;
  margin-left: 10px;
}

.card--marker {
  display: flex;
  align-items: center;
  font-size: 13px;
}

<div className="card">
  <img className="card--image" src={prop.item.image} width={150} />
  <div className="card--detail">
    <div className="card--header">
      <div className="card--marker">
        <img src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/>
        <span>{prop.item.location}</span>
      </div>
      <a href={prop.item.URL}>View on Google Maps</a>
    </div>
    <label>{prop.item.title}</label>
    <small>12 Jan, 2021 - 24 Jan, 2021</small>
    <p>Description</p>
  </div>
</div>

CodePudding user response：

Change classname to className in this line:

 <img classname="card--marker" src="https://media.istockphoto.com/vectors/location-icon-vector-pin-sign-isolated-on-white-background-navigation-vector-id1148705812?k=20&m=1148705812&s=612x612&w=0&h=dbYgYcjgXCfB72741foF1cH3Y3Nj2Oe8GmyM-1YxWEM=" width={16}/>
                <p>{prop.item.location}</p>