Implement HTML Div with Text on Left And Arrow on Right

implement HTML div with text on left and arrow on right HTML

• HTML

<div class="container">
  <div class="text">Some Text</div>
  <div class="icon">&rarr;</div>
</div>

• CSS

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
}

.text {
  font-size: 16px;
  font-weight: bold;
}

.icon {
  font-size: 24px;
  color: #333;
}

• Template

Here is new update based script above:

<style>
.job-container {
  padding: 40px 24px; 
  border: 1px solid #DEE1E5; 
  border-radius: 8px;
}
.job-card-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.job-card-text {
  font-weight: 400;
  font-size: 28px;
  color: #1B1C1E;
}
.job-card-icon {
  font-size: 24px;
  color: #005FA9;
  font-size: 16px;
  font-weight: 500;
}
.job-card-location {
  margin-left: 2px;
  color: #6D7176;
  font-size: 16px;
  font-weight: 400;
}
</style>

<html>
<div class="job-list">
	<div class="job-container">
		<div class="job-card-container">
		  <div class="job-card-text">Junior/Middle Product Designer</div>
		  <div class="job-card-icon">Apply &gt;</div>
		</div>
		<div style="height: 24px;"></div>
		<div>
			<span><svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z" fill="#6D7176"/>
</svg><span class="job-card-location">Da Nang City</span></span>
			<span><svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.25C6.54961 1.25 3.75 3.76992 3.75 6.875C3.75 11.875 10 18.75 10 18.75C10 18.75 16.25 11.875 16.25 6.875C16.25 3.76992 13.4504 1.25 10 1.25ZM10 10C9.50555 10 9.0222 9.85338 8.61107 9.57867C8.19995 9.30397 7.87952 8.91352 7.6903 8.45671C7.50108 7.99989 7.45157 7.49723 7.54804 7.01227C7.6445 6.52732 7.8826 6.08186 8.23223 5.73223C8.58186 5.3826 9.02732 5.1445 9.51227 5.04804C9.99723 4.95157 10.4999 5.00108 10.9567 5.1903C11.4135 5.37952 11.804 5.69995 12.0787 6.11107C12.3534 6.5222 12.5 7.00555 12.5 7.5C12.4993 8.16282 12.2357 8.79828 11.767 9.26697C11.2983 9.73565 10.6628 9.99928 10 10Z" fill="#6D7176"/>
</svg><span class="job-card-location">Posted 7 Day Ago</span></span>
		</div>
	<div>
</div>
</html>

You need to login to do this manipulation!